近期做移动端项目发现360浏览器及微信不能读取本地图片，究其原因是无法获取文件格式，导致base64编码时文件头丢失文件类型信息，无法生成正确的图片编码，所以添加文件头即可解决此问题。
正确的编码
data:image/jpeg;base64,...
微信的编码
data:;base64,...
<!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 =http://www.likecs.com/ new UploadPic(); u.init({ input: document.querySelector(\'.input\'), callback: function (base64) { var html =http://www.likecs.com/ \'\'; html =http://www.likecs.com/ \'<div><div>图片名称：</div><div>\' + this.fileName + \'</div></div>\' + \'<div><div>原始大小：</div><div>\' + (this.fileSize / 1024).toFixed(2) + \'KB<\/div><\/div>\' + \'<div><div>编码大小：</div><div>\' + (base64.length / 1024).toFixed(2) + \'KB<\/div><\/div>\' + \'<div><div>原始尺寸：</div><div>\' + this.tw + \'px * \' + this.th + \'px<\/div><\/div>\' + \'<div><div>编码尺寸：</div><div>\' + this.sw + \'px * \' + this.sh + \'px<\/div><\/div>\' + \'<div><div>图片预览：</div><div><img src="\' + base64 + \'"><\/div><\/div>\' + \'<div><div>Base64编码：</div><div><textarea>\' + base64 + \'<\/textarea><\/div><\/div>\'; document.querySelector(\'.imgzip\').innerHTML =http://www.likecs.com/ html; }, loading: function () { document.querySelector(\'.imgzip\').innerHTML =http://www.likecs.com/ \'读取中，请稍候...\'; } }); } function UploadPic() { this.sw =http://www.likecs.com/ 0; this.sh =http://www.likecs.com/ 0; this.tw =http://www.likecs.com/ 0; this.th =http://www.likecs.com/ 0; this.scale =http://www.likecs.com/ 0; this.maxWidth =http://www.likecs.com/ 0; this.maxHeight =http://www.likecs.com/ 0; this.maxSize =http://www.likecs.com/ 0; this.fileSize =http://www.likecs.com/ 0; this.fileDate =http://www.likecs.com/ null; this.fileType =http://www.likecs.com/ \'\'; this.fileName =http://www.likecs.com/ \'\'; this.input =http://www.likecs.com/ null; this.canvas =http://www.likecs.com/ null; this.mime =http://www.likecs.com/ {}; this.type =http://www.likecs.com/ \'\'; this.callback =http://www.likecs.com/ function () {}; this.loading =http://www.likecs.com/ function () {}; } UploadPic.prototype.init =http://www.likecs.com/ function (options) { this.maxWidth =http://www.likecs.com/ options.maxWidth || 800; this.maxHeight =http://www.likecs.com/ options.maxHeight || 600; this.maxSize =http://www.likecs.com/ options.maxSize || 3 * 1024 * 1024; this.input =http://www.likecs.com/ options.input; this.mime =http://www.likecs.com/ {\'png\': \'image/png\', \'jpg\': \'image/jpeg\', \'jpeg\': \'image/jpeg\', \'bmp\': \'image/bmp\'}; this.callback =http://www.likecs.com/ options.callback || function () {}; this.loading =http://www.likecs.com/ options.loading || function () {}; this._addEvent(); }; /** * @description 绑定事件 * @param {Object} elm 元素 * @param {Function} fn 绑定函数 */ UploadPic.prototype._addEvent =http://www.likecs.com/ function () { var _this =http://www.likecs.com/ this; function tmpSelectFile(ev) { _this._handelSelectFile(ev); } this.input.addEventListener(\'change\', tmpSelectFile, false); }; /** * @description 绑定事件 * @param {Object} elm 元素 * @param {Function} fn 绑定函数 */ UploadPic.prototype._handelSelectFile =http://www.likecs.com/ function (ev) { var file =http://www.likecs.com/ ev.target.files[0]; this.type =http://www.likecs.com/ file.type // 如果没有文件类型，则通过后缀名判断（解决微信及360浏览器无法获取图片类型问题） if (!this.type) { this.type =http://www.likecs.com/ 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 =http://www.likecs.com/ file.name; this.fileSize =http://www.likecs.com/ file.size; this.fileType =http://www.likecs.com/ this.type; this.fileDate =http://www.likecs.com/ file.lastModifiedDate; this._readImage(file); }; /** * @description 读取图片文件 * @param {Object} image 图片文件 */ UploadPic.prototype._readImage =http://www.likecs.com/ function (file) { var _this =http://www.likecs.com/ 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 =http://www.likecs.com/ function (file, callback) { var reader =http://www.likecs.com/ new FileReader(); var _this =http://www.likecs.com/ this; function tmpLoad() { // 头不带图片格式，需填写格式 var re =http://www.likecs.com/ /^data:base64,/; var ret =http://www.likecs.com/ this.result + \'\'; if (re.test(ret)) ret =http://www.likecs.com/ ret.replace(re, \'data:\' + _this.mime[_this.fileType] + \';base64,\'); callback && callback(ret); } reader.onload =http://www.likecs.com/ tmpLoad; reader.readAsDataURL(file); return false; }; /** * @description 创建图片 * @param {Object} image 图片文件 */ UploadPic.prototype._createImage =http://www.likecs.com/ function (uri) { var img =http://www.likecs.com/ new Image(); var _this =http://www.likecs.com/ this; function tmpLoad() { _this._drawImage(this); } img.onload =http://www.likecs.com/ tmpLoad; img.src =http://www.likecs.com/ uri; }; /** * @description 创建Canvas将图片画至其中，并获得压缩后的文件 * @param {Object} img 图片文件 * @param {Number} width 图片最大宽度 * @param {Number} height 图片最大高度 * @param {Function} callback 回调函数，参数为图片base64编码 * return {Object} 返回压缩后的图片 */ UploadPic.prototype._drawImage =http://www.likecs.com/ function (img, callback) { this.sw =http://www.likecs.com/ img.width; this.sh =http://www.likecs.com/ img.height; this.tw =http://www.likecs.com/ img.width; this.th =http://www.likecs.com/ img.height; this.scale =http://www.likecs.com/ (this.tw / this.th).toFixed(2); if (this.sw > this.maxWidth) { this.sw =http://www.likecs.com/ this.maxWidth; this.sh =http://www.likecs.com/ Math.round(this.sw / this.scale); } if (this.sh > this.maxHeight) { this.sh =http://www.likecs.com/ this.maxHeight; this.sw =http://www.likecs.com/ Math.round(this.sh * this.scale); } this.canvas =http://www.likecs.com/ document.createElement(\'canvas\'); var ctx =http://www.likecs.com/ this.canvas.getContext(\'2d\'); this.canvas.width =http://www.likecs.com/ this.sw; this.canvas.height =http://www.likecs.com/ 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 =http://www.likecs.com/ 0; this.canvas.height =http://www.likecs.com/ 0; this.canvas =http://www.likecs.com/ null; }; </script> </body> </html>