转：解决微信及360浏览器无法读取本地图片问题_手机微信浏览器 input type=‘file’ 无法获取图库相片-CSDN博客

 
 <!doctype html> 
 
 <html> 
 
 <head> 
 
 <meta charset= 
 "utf-8" 
 > 
 
 <meta name= 
 "viewport"  
 content= 
 "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" 
 > 
 
 <title>图片压缩</title> 
 
 <style> 
 
 body { margin:0; padding:0; } 
 
 html { font-size:62.5%; } 

 .imgzip { padding:1em; } 
 
 .imgzip .itm { padding-bottom:1em; word- 
 break 
 : 
 break 
 -all; font-size:1.2rem; line-height:1.5em; } 
 
 .imgzip .itm .tit { margin-bottom:.5em; background-color:#e71446; color:#FFF; padding:.5rem 1rem; border-radius:3px; } 
 
 .imgzip .itm .cnt { padding:1rem; } 
 
 .imgzip .itm .cnt img { display:block; max-width:100%; } 
 
 .imgzip textarea { width:100%; height:20em; } 
 
 </style> 
 
 </head> 

 <body> 
 
 <input type= 
 "file"  
 accept= 
 "image/*;capture=camera"  
 class 
 = 
 "input" 
 > 
 
 <div  
 class 
 = 
 "imgzip" 
 ></div> 
 
 <script> 
 
 document.addEventListener( 
 'DOMContentLoaded' 
 , init, false); 

 function  
 init() { 
 
 var  
 u =  
 new  
 UploadPic(); 
 
 u.init({ 
 
 input: document.querySelector( 
 '.input' 
 ), 
 
 callback:  
 function  
 (base64) { 
 
 var  
 html =  
 '' 
 ; 
 
 html =  
 '<div class="itm"><div class="tit">图片名称：</div><div class="cnt">'  
 + this.fileName +  
 '</div></div>' 
 
 +  
 '<div class="itm"><div class="tit">原始大小：</div><div class="cnt">'  
 + (this. 
 fileSize  
 / 1024).toFixed(2) +  
 'KB<\/div><\/div>' 
 
 +  
 '<div class="itm"><div class="tit">编码大小：</div><div class="cnt">'  
 + (base64.length / 1024).toFixed(2) +  
 'KB<\/div><\/div>' 
 
 +  
 '<div class="itm"><div class="tit">原始尺寸：</div><div class="cnt">'  
 + this.tw +  
 'px * '  
 + this.th +  
 'px<\/div><\/div>' 
 
 +  
 '<div class="itm"><div class="tit">编码尺寸：</div><div class="cnt">'  
 + this.sw +  
 'px * '  
 + this.sh +  
 'px<\/div><\/div>' 
 
 +  
 '<div class="itm"><div class="tit">图片预览：</div><div class="cnt"><img src="'  
 + base64 +  
 '"><\/div><\/div>' 
 
 +  
 '<div class="itm"><div class="tit">Base64编码：</div><div class="cnt"><textarea>'  
 + base64 +  
 '<\/textarea><\/div><\/div>' 
 ; 

 document.querySelector( 
 '.imgzip' 
 ).innerHTML = html; 
 
 }, 
 
 loading:  
 function  
 () { 
 
 document.querySelector( 
 '.imgzip' 
 ).innerHTML =  
 '读取中，请稍候...' 
 ; 
 
 } 
 
 }); 
 
 } 

 function  
 UploadPic() { 
 
 this.sw = 0; 
 
 this.sh = 0; 
 
 this.tw = 0; 
 
 this.th = 0; 
 
 this.scale = 0; 
 
 this.maxWidth = 0; 
 
 this.maxHeight = 0; 
 
 this.maxSize = 0; 
 
 this. 
 fileSize  
 = 0; 
 
 this.fileDate = null; 
 
 this. 
 fileType  
 =  
 '' 
 ; 
 
 this.fileName =  
 '' 
 ; 
 
 this.input = null; 
 
 this.canvas = null; 
 
 this.mime = {}; 
 
 this.type =  
 '' 
 ; 
 
 this.callback =  
 function  
 () {}; 
 
 this.loading =  
 function  
 () {}; 
 
 } 

 UploadPic.prototype.init =  
 function  
 (options) { 
 
 this.maxWidth = options.maxWidth || 800; 
 
 this.maxHeight = options.maxHeight || 600; 
 
 this.maxSize = options.maxSize || 3 * 1024 * 1024; 
 
 this.input = options.input; 
 
 this.mime = { 
 'png' 
 :  
 'image/png' 
 ,  
 'jpg' 
 :  
 'image/jpeg' 
 ,  
 'jpeg' 
 :  
 'image/jpeg' 
 ,  
 'bmp' 
 :  
 'image/bmp' 
 }; 
 
 this.callback = options.callback ||  
 function  
 () {}; 
 
 this.loading = options.loading ||  
 function  
 () {}; 
 
 this._addEvent(); 
 
 }; 

 /** 
 
 * @description 绑定事件 
 
 * @param {Object} elm 元素 
 
 * @param {Function} fn 绑定函数 
 
 */ 
 
 UploadPic.prototype._addEvent =  
 function  
 () { 
 
 var  
 _this = this; 
 
 function  
 tmpSelectFile(ev) { 
 
 _this._handelSelectFile(ev); 
 
 } 
 
 this.input.addEventListener( 
 'change' 
 , tmpSelectFile, false); 
 
 }; 

 /** 
 
 * @description 绑定事件 
 
 * @param {Object} elm 元素 
 
 * @param {Function} fn 绑定函数 
 
 */ 
 
 UploadPic.prototype._handelSelectFile =  
 function  
 (ev) { 
 
 var  
 file = ev.target.files[0]; 
 
 this.type = file.type 
 
 // 如果没有文件类型，则通过后缀名判断（解决微信及360浏览器无法获取图片类型问题） 
 
 if  
 (!this.type) { 
 
 this.type = this.mime[file.name.match(/\.([^\.]+)$/i)[1]]; 
 
 } 
 
 if  
 (!/image.(png|jpg|jpeg|bmp)/.test(this.type)) { 
 
 alert( 
 '选择的文件类型不是图片' 
 ); 
 
 return 
 ; 
 
 } 
 
 if  
 (file.size > this.maxSize) { 
 
 alert( 
 '选择文件大于'  
 + this.maxSize / 1024 / 1024 +  
 'M，请重新选择' 
 ); 
 
 return 
 ; 
 
 } 

 this.fileName = file.name; 
 
 this. 
 fileSize  
 = file.size; 
 
 this. 
 fileType  
 = this.type; 
 
 this.fileDate = file.lastModifiedDate; 
 
 this._readImage(file); 
 
 }; 

 /** 
 
 * @description 读取图片文件 
 
 * @param {Object} image 图片文件 
 
 */ 
 
 UploadPic.prototype._readImage =  
 function  
 (file) { 
 
 var  
 _this = this; 
 
 function  
 tmpCreateImage(uri) { 
 
 _this._createImage(uri); 
 
 } 
 
 this.loading(); 
 
 this._getURI(file, tmpCreateImage); 
 
 }; 

 /** 
 
 * @description 通过文件获得URI 
 
 * @param {Object} file 文件 
 
 * @param {Function} callback 回调函数，返回文件对应URI 
 
 * return {Bool} 返回false 
 
 */ 
 
 UploadPic.prototype._getURI =  
 function  
 (file, callback) { 
 
 var  
 reader =  
 new  
 FileReader(); 
 
 var  
 _this = this; 

 function  
 tmpLoad() { 
 
 // 头不带图片格式，需填写格式 
 
 var  
 re = /^data:base64,/; 
 
 var  
 ret = this.result +  
 '' 
 ; 
 
 if  
 (re.test(ret)) ret = ret.replace(re,  
 'data:'  
 + _this.mime[_this. 
 fileType 
 ] +  
 ';base64,' 
 ); 
 
 callback && callback(ret); 
 
 } 
 
 reader.onload = tmpLoad; 
 
 reader.readAsDataURL(file); 
 
 return  
 false; 
 
 }; 

 /** 
 
 * @description 创建图片 
 
 * @param {Object} image 图片文件 
 
 */ 
 
 UploadPic.prototype._createImage =  
 function  
 (uri) { 
 
 var  
 img =  
 new  
 Image(); 
 
 var  
 _this = this; 
 
 function  
 tmpLoad() { 
 
 _this._drawImage(this); 
 
 } 
 
 img.onload = tmpLoad; 
 
 img.src = uri; 
 
 }; 

 /** 
 
 * @description 创建Canvas将图片画至其中，并获得压缩后的文件 
 
 * @param {Object} img 图片文件 
 
 * @param {Number} width 图片最大宽度 
 
 * @param {Number} height 图片最大高度 
 
 * @param {Function} callback 回调函数，参数为图片base64编码 
 
 * return {Object} 返回压缩后的图片 
 
 */ 
 
 UploadPic.prototype._drawImage =  
 function  
 (img, callback) { 
 
 this.sw = img.width; 
 
 this.sh = img.height; 
 
 this.tw = img.width; 
 
 this.th = img.height; 
 
 this.scale = (this.tw / this.th).toFixed(2); 

 if  
 (this.sw > this.maxWidth) { 
 
 this.sw = this.maxWidth; 
 
 this.sh = Math. 
 round 
 (this.sw / this.scale); 
 
 } 
 
 if  
 (this.sh > this.maxHeight) { 
 
 this.sh = this.maxHeight; 
 
 this.sw = Math. 
 round 
 (this.sh * this.scale); 
 
 } 
 
 this.canvas = document.createElement( 
 'canvas' 
 ); 
 
 var  
 ctx = this.canvas.getContext( 
 '2d' 
 ); 
 
 this.canvas.width = this.sw; 
 
 this.canvas.height = this.sh; 
 
 ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, this.sw, this.sh); 
 
 this.callback(this.canvas.toDataURL(this.type)); 
 
 ctx.clearRect(0, 0, this.tw, this.th); 
 
 this.canvas.width = 0; 
 
 this.canvas.height = 0; 
 
 this.canvas = null; 
 
 }; 
 
 </script> 
 
 </body> 
 
 </html>