/
media.js
146 lines (144 loc) · 3.56 KB
/
media.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/*
media.js v1.0
https://github.com/kangjy/mediajs
Author: kangjy (https://github.com/kangjy/mediajs)
License: MIT
*/
var media = (function() {
var options,inputmedia;
/*
判断浏览器是否为手机终端,方便做手机适配
*/
function _isMobile() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod","Mobile"];
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > -1) {
return true;
}
}
return false;
}
/*
增加手机端适配
*/
function _adapteMobile(){
var meta1 = document.createElement("meta");
meta1.setAttribute("content", "yes");
meta1.setAttribute("name", "apple-mobile-web-app-capable");
var meta2 = document.createElement("meta");
meta2.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
meta2.setAttribute("name", "viewport");
var head = document.getElementsByTagName("head")[0];
head.appendChild(meta1);
head.appendChild(meta2);
}
/*
将上传的图片用img展示
*/
function _displayAsImage(file) {
window.URL = window.URL || window.webkitURL;
var img=document.getElementById(options.imageid);
if (window.URL){
var imgURL = URL.createObjectURL(file);
img.onload = function() {
URL.revokeObjectURL(imgURL);
};
img.src = imgURL;
}else if(window.FileReader){
var reader = new FileReader();
reader.onload = function (e) {
img.src=e.target.result;
}
reader.readAsDataURL(file);
}
}
/*
将上传的图片用canvas展示
*/
function _drawOnCanvas(file) {
var reader = new FileReader();
reader.onload = function (e) {
var dataURL = e.target.result,
c = document.getElementById(options.canvasid), // see Example 4
ctx = c.getContext('2d'),
img = new Image();
img.onload = function() {
c.width = img.width;
c.height = img.height;
ctx.drawImage(img, 0, 0);
};
img.src = dataURL;
};
reader.readAsDataURL(file);
}
/*
初始化media的input标签
*/
function _initInput(id,mediatype){
var minput=document.getElementById(options.id);
//minput.setAttribute('capture', "");
minput.setAttribute('accept', "image/*");
return minput;
}
/*
初始化标签
*/
function initMediaInput() {
if(_isMobile){
_adapteMobile();
}
inputmedia = _initInput(options.id,"image");
inputmedia.onchange = function () {
var ifile=inputmedia.files[0];
if(options.onchange){
var result=options.onchange.call(this);
if(result){
return;
}
}
if((ifile.type).indexOf("image")>-1){
if(options.imageid){
_displayAsImage(ifile);
}
if(options.canvasid){
_drawOnCanvas(ifile);
}
if(options.posturl){
_uploadimage([inputmedia],options.posturl,options.callfn)
}
}else{
options.onNotSupported.call(this,ifile.type)
}
};
return inputmedia;
}
/*
上传图片到服务器
*/
function _uploadimage(files,url,fn) {
var form = new FormData(),
xhr = new XMLHttpRequest();
for(var i=0;i<files.length;i++){
form.append(files[i].name,files[i].files[0])
}
xhr.open('post',url, true);
xhr.send(form);
xhr.onreadystatechange=function(){
if("4"==this.readyState&&fn){
fn.call(this);
}
}
}
return {
init: function(captureOptions) {
var doNothing = function() {};
options = captureOptions || {};
var file=initMediaInput();
return file;
},
uploadimage:_uploadimage
};
})();