上传图片转为base64格式预览并压缩图片（不兼容IE9以下浏览器，兼容移动端ios,android）

　　前些天公司要求在微信移动端做上传图片并预览的功能，要求能够调用摄像头拍照并立即预览。

　　在网上搜了一些方法，开始自己写了个简单的功能实现代码。结果发现移动端拍照出来的图片动不动就2M+,又因为要批量上传，为用户的流量和上传速度考虑，我决定做一下优化，看能不能在预览前就压缩一下图片尺寸。

　　结果又是一阵百度，发现一个靠谱的封装好的base64图片预览及压缩的方法。

　　直接上下载地址吧：

　　http://www.imwinlion.com/wp-content/uploads/2016/05/localresizeimg.rar

　　源码和用法都很简单，稍微看下源码就懂了，为了兼容移动端，请一定将/path/mobileBUGFix.mini.js加入到页面中。反正我是加了的，没加会有什么后果，大家有空可以测一下。

　　这个插件还是比较好用的，问题是我要批量上传，怎么搞？这个插件只能单个图片上传！

　　所以我后来改良了一下插件，在插件内部指向文件时，做了一个循环，话不多说，代码也很简单，直接上代码

　　

     /**
      * 获得base64
      * @param {Object} obj
      * @param {Number} [obj.width] 图片需要压缩的宽度，高度会跟随调整
      * @param {Number} [obj.quality=0.8] 压缩质量，不压缩为1
      * @param {Function} [obj.before(this, blob, file)] 处理前函数,this指向的是input:file
      * @param {Function} obj.success(obj) 处理后函数
      * @example
      *
      */
     $.fn.localResizeIMG = function(obj) {
         this.on('change', function() {
             //批量预览压缩
             var file,blob;
             var _this=this;
             if(this.files.length>1){
                 for(var i = 0, len=_this.files.length;i<len;i++){
                     file=_this.files[i];
                     if (window.createObjectURL!=undefined) { // basic
                         blob = window.createObjectURL(file) ;
                     } else if (window.URL!=undefined) { // mozilla(firefox)
                         blob = window.URL.createObjectURL(file) ;
                     } else if (window.webkitURL!=undefined) { // webkit or chrome
                         blob = window.webkitURL.createObjectURL(file) ;
                     }
                     if ($.isFunction(obj.before)) {
                         obj.before(_this, blob, file)
                     }
                     if(file.size/1024>300){
                         obj.quality=300/(file.size/1024)
                     }else{
                         obj.quality=1
                     }
                     _create(blob,obj.quality, file);
                 }
             }else{
                 //单张预览压缩图片
                 file = this.files[0];
                 if (window.createObjectURL!=undefined) { // basic
                     blob = window.createObjectURL(file) ;
                 } else if (window.URL!=undefined) { // mozilla(firefox)
                     blob = window.URL.createObjectURL(file) ;
                 } else if (window.webkitURL!=undefined) { // webkit or chrome
                     blob = window.webkitURL.createObjectURL(file) ;
                 }
                 // 执行前函数
                 if ($.isFunction(obj.before)) {
                     obj.before(this, blob, file)
                 };
                 if(file.size/1024>300){
                     obj.quality=300/(file.size/1024)
                 }else{
                     obj.quality=1
                 }
                 _create(blob,obj.quality, file);
             }
             this.value = ''; // 清空临时数据
         });

         /**
          * 生成base64
          * @param blob 通过file获得的二进制
          */
         function _create(blob,quality) {
             console.log(quality);
             var img = new Image();
             img.src = blob;
             img.onload = function() {
                 var that = this;
                 //生成比例
                 var w = that.width,
                     h = that.height,
                     quality = w / h;
                 w = obj.width || w;
                 h = w / quality;

                 //生成canvas
                 var canvas = document.createElement('canvas');
                 var ctx = canvas.getContext('2d');
                 $(canvas).attr({
                     width: w,
                     height: h
                 });
                 ctx.drawImage(that, 0, 0, w, h);

                 /**
                  * 生成base64
                  * 兼容修复移动设备需要引入mobileBUGFix.js
                  */
                 var base64 = canvas.toDataURL('image/png', quality || 0.8);

                 // 修复IOS
                 if (navigator.userAgent.match(/iphone/i)) {
                     var mpImg = new MegaPixImage(img);
                     mpImg.render(canvas, {
                         maxWidth: w,
                         maxHeight: h,
                         quality: quality || 0.8
                     });
                     base64 = canvas.toDataURL('image/png', quality || 0.8);
                 }

                 // 修复android
                 if (navigator.userAgent.match(/Android/i)) {
                     var encoder = new JPEGEncoder();
                     base64 = encoder.encode(ctx.getImageData(0, 0, w, h), parseFloat(quality).toFixed(1) * 100 || 80);
                 }

                 // 生成结果
                 var result = {
                     base64: base64,
                     clearBase64: base64.substr(base64.indexOf(',') + 1)
                 };

                 // 执行后函数
                 obj.success(result);
             };
         }
     };

     // 例子
     /*
     $('input:file').localResizeIMG({
         width: 100,
         quality: 0.1,
         //before: function (that, blob) {},
         success: function (result) {
             var img = new Image();
             img.src = result.base64;

             $('body').append(img);
             console.log(result);
         }
     });
 */

　　改良之后，我判断了input[type=files].files的长度，如果是批量上传的话，长度应该是大于1的，这个逻辑应该很好理解；然后循环每一个files，获取每个图片的size（图片大小），我这里的图片尺寸判断是写死了的300kb，如果这张图片>300kb，就压缩尺寸，如果相反，则按原尺寸预览。如果你用我改良后的代码，调用方法后的quality属性就不用赋值了。

　　with属性：你压缩后图片的宽度，不宜太小，我是设置的400，太小会失真。

　　before方法：开始压缩前执行函数

　　success方法：压缩成功后的回调函数，一般就是写预览代码，如果你要异步上传，这里也可以写ajax

　　

　　说了这么多，再来说一下移动端的照相机调用，文件格式限制吧

　　很简单，一行搞定

　　

         <input id="images-multiple" class="weui-uploader__input" type="file" accept="image/*" multiple="multiple">

　　accept:接收文件的类型

　　multiple:可多选（android手机设置此项后，不能调用相机，只能从相册中选择；IOS手机体验还是很溜的）

　　id和calss自行制定就OK了。

　　

　　目前的我页面在微信内跑，尚未发现问题，如有疑问欢迎探讨！！

　　提供一个GITHUB的类似解决方案：内容还没来得及看，有兴趣可以去看看

　　https://github.com/lyg945/localResizeIMG/tree/master/