上傳圖片轉為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/