摘要：一需求的場景在我們的需求中需要有一個在手機瀏覽器端，用戶實現上傳證件照片的功能，我們第一版上了一個最簡版，直接讓用戶在本地選擇圖片，然后上傳到公司公共的服務器上。

一、需求的場景：

在我們的需求中需要有一個在手機瀏覽器端，用戶實現上傳證件照片的功能，我們第一版上了一個最簡版，直接讓用戶在本地選擇圖片，然后上傳到公司公共的服務器上。
   功能實現后我們發現一個問題，公司公共的服務器有2M圖片的限制，而用戶手機目前絕大多數都支持高清拍照，尺寸普遍在3000+ x 2000+的大小；

所以我們采用了在瀏覽器端通過HTML5的fileReader接口來處理上傳文件的大小，將重新處理壓縮后的文件在傳給后端，這樣在保證了圖片基本質量（由于證件圖片，我們只關心證件號碼是否清晰）的情況下，也能夠做到網絡傳輸內容的最小化，讓上傳變得更快，給用戶較好的體驗。

二、逐步分析

首先我們上傳的文件在input事件的默認參數里面是一個file類型，他是Binary Large Object的一個子集，需要將Blob類型轉換成DataUrl，能夠被HTML5本地的Canvas畫布解析，通過Canvas畫布根據一定的壓縮比例重新壓縮后，再將圖片轉換成Blob傳到公司公共的圖片服務器上。

select local file -> Blob -> DataUrl -> Canvas compress -> DataUrl -> Blob -> Upload file

三、具體實現邏輯

1，監聽本地input框change事件，當內容變化，從回調函數的參數中拿到file文件；
2，判斷當前瀏覽器是否支持本地壓縮（是否支持HTML5的fileReader方法）；
3，如果不支持本地壓縮，采用傳統方式直接將原始圖片上傳到服務器上；
4，如果支持瀏覽器的本地壓縮，那么進入到本地壓縮的流程；
5，壓縮完成后將最新的blob類型文件傳遞到公司服務器上；

        // 用戶在瀏覽器本地選擇上傳圖片
        /*
        * option = {
        *       el: element, // input file element
        *       width: 800,
        *       height: 600,
        *       rate: 1,
        *       cb: callback
        * }
        *
        */
        function compressUploadImageAsClient(option) {
            var opt = {
                el: option.el,
                width: option.width || 800,
                height: option.height || 600,
                rate: option.rate || 1,
                cb: option.cb || function() {},
                postUrl: option.postUrl || "",
                postLoad: option.postLoad || function() {},
                postError: option.postError || function() {},
                postAbort: option.postAbort || function() {}
            };

            opt.el.addEventListener("change", function(e) {
                // 如果不支持H5的filereader方法，直接用原圖上傳
                if(typeof FileReader != "function") {
                    // sendFile(e.target.files);
                    postFileToServer([e.target.files[0]], opt.postUrl, opt.postLoad, opt.postError, opt.postAbort);
                    return;
                }

                // 將blob類型轉換成DataUrl
                readBlobAsDataURL(e.target.files[0], function(url, size) {
                      // 拿到url類型的圖片之后，通過canvas進行壓縮轉換
                    readBase64AsBlob({
                        url: url,
                        size: size,
                        width: 800,
                        height: 600,
                        rate: 1,
                        callback: function(dataUrl) {
                            // 在壓縮完成的回調函數中得到最新的圖片DataUrl，將其轉換成服務端接口能夠識別的Blob類型
                            var blob = dataURLtoBlob(dataUrl);
                            // 調用上傳服務器圖片的接口
                            postFileToServer([blob], opt.postUrl, opt.postLoad, opt.postError, opt.postAbort);
                        }
                    });
                    
                });
            }, false)
        }

        // file對象轉換成dataurl
        function readBlobAsDataURL(blob, callback) {
            var a = new FileReader();
            a.onload = function(e) {
                callback(e.target.result, blob.size);
            };
            a.readAsDataURL(blob);
        }

        // dataurl轉換成blob
        function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type:mime});
        }

        // blob轉換成dataUrl，并且通過canvas畫布壓縮重新生成新的dataUrl
        /*
        * option: {
        *     url: image url,
        *     size: image size,
        *     width: 800,
        *     height: 600,
        *     rate: 1,
        *     callback: callback
        * }
        */
        function readBase64AsBlob(option) {

            var opt = {
                url: option.url,
                size: option.size,
                width: option.width || 800,
                height: option.height || 600,
                rate: option.rate || 0.6,
                callback: option.callback || function(url) {}
            };

            var img = new Image();
            img.src = opt.url;
            img.onload = function(){
                var canvas = document.createElement("canvas"), //創建canvas元素
                    width = img.width, //確保canvas的尺寸和圖片一樣
                    height = img.height;

                console.log("壓縮前圖片的尺寸大小：", width, height);
                // 根據最大尺寸 800x600的大小，按比例重新設置圖片的尺寸
                var neww = opt.width;
                var newh = opt.height;
                // 當圖片的寬高分別大于800，600的情況下，在對其進行尺寸的壓縮（尺寸壓縮對最終size的減小有很大作用）
                if(width > opt.width && height > opt.height) {
                    if(height/width > opt.height/opt.width) {
                        newh = opt.height;
                        neww = (opt.height/height) * width;
                    } else {
                        newh = (opt.width/width) * height;
                        neww = opt.width;
                    }
                }

                // 壓縮率
                var rate = opt.rate;
                if(opt.size < 1024*1024*2) {
                    // 小于2m處理;
                    rate = opt.rate * 0.6;
                } else if(opt.size < 1024*1024*4) {
                    // 2m到4m之間
                    rate = opt.rate * 0.4;
                } else if(opt.size < 1024*1024*8) {
                    // 4m到8m之間
                    rate = opt.rate * 0.3;
                } else {
                    // 大于8m的圖片
                    rate = opt.rate * 0.2;
                }

                canvas.width = neww;
                canvas.height = newh;
                canvas.getContext("2d").drawImage(img, 0, 0, neww, newh); //將圖片繪制到canvas中
                var dataURL = canvas.toDataURL("image/jpeg", rate); //轉換圖片為dataURL
                
                opt.callback(dataURL);
            }
        }

        // 通過ajax上傳圖片到公司服務器上
        function postFileToServer(files, posturl, success, fail, abort) {
            if (!files || files.length < 1) {
                alert("上傳的文件不能為空");
                return;
            }

            alert("壓縮后的圖片對象：" + files[0].size);
         
            var formData = new FormData();     // 創建一個表單對象FormData
            // formData.append("submit", "Submit");  // 往表單對象添加文本字段
             
             var fileNames = "";
            for (var i = 0; i < files.length; i++) {
                var file = files[i];    // file 對象有 name, size 屬性
                formData.append( "file[" + i + "]", file);       // 往FormData對象添加File對象
                fileNames += file.name + " ";
            }

            var xhr = new XMLHttpRequest();
            xhr.addEventListener("load", function(e) {
                success(e);
            }, false);

            xhr.addEventListener("error", function(e) {
                error(e);
            }, false);

            xhr.addEventListener("abort", function(e) {
                abort(e);
            });

            xhr.open("post", posturl, true);
            xhr.send(formData);
        }