摘要：一需求的場(chǎng)景在我們的需求中需要有一個(gè)在手機(jī)瀏覽器端，用戶(hù)實(shí)現(xiàn)上傳證件照片的功能，我們第一版上了一個(gè)最簡(jiǎn)版，直接讓用戶(hù)在本地選擇圖片，然后上傳到公司公共的服務(wù)器上。

一、需求的場(chǎng)景：

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

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

二、逐步分析

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

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

三、具體實(shí)現(xiàn)邏輯

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

        // 用戶(hù)在瀏覽器本地選擇上傳圖片
        /*
        * 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類(lèi)型轉(zhuǎn)換成DataUrl
                readBlobAsDataURL(e.target.files[0], function(url, size) {
                      // 拿到url類(lèi)型的圖片之后，通過(guò)canvas進(jìn)行壓縮轉(zhuǎn)換
                    readBase64AsBlob({
                        url: url,
                        size: size,
                        width: 800,
                        height: 600,
                        rate: 1,
                        callback: function(dataUrl) {
                            // 在壓縮完成的回調(diào)函數(shù)中得到最新的圖片DataUrl，將其轉(zhuǎn)換成服務(wù)端接口能夠識(shí)別的Blob類(lèi)型
                            var blob = dataURLtoBlob(dataUrl);
                            // 調(diào)用上傳服務(wù)器圖片的接口
                            postFileToServer([blob], opt.postUrl, opt.postLoad, opt.postError, opt.postAbort);
                        }
                    });
                    
                });
            }, false)
        }

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

        // dataurl轉(zhuǎn)換成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轉(zhuǎn)換成dataUrl，并且通過(guò)canvas畫(huà)布?jí)嚎s重新生成新的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"), //創(chuàng)建canvas元素
                    width = img.width, //確保canvas的尺寸和圖片一樣
                    height = img.height;

                console.log("壓縮前圖片的尺寸大?。?, width, height);
                // 根據(jù)最大尺寸 800x600的大小，按比例重新設(shè)置圖片的尺寸
                var neww = opt.width;
                var newh = opt.height;
                // 當(dāng)圖片的寬高分別大于800，600的情況下，在對(duì)其進(jìn)行尺寸的壓縮（尺寸壓縮對(duì)最終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); //轉(zhuǎn)換圖片為dataURL
                
                opt.callback(dataURL);
            }
        }

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

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