在瀏覽器端用H5實現圖片壓縮上傳

時間 2019-12-05

原文原文鏈接

1、需求的場景：ajax

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

因此咱們採用了在瀏覽器端經過HTML5的fileReader接口來處理上傳文件的大小，將從新處理壓縮後的文件在傳給後端，這樣在保證了圖片基本質量（因爲證件圖片，咱們只關心證件號碼是否清晰）的狀況下，也可以作到網絡傳輸內容的最小化，讓上傳變得更快，給用戶較好的體驗。

2、逐步分析canvas

首先咱們上傳的文件在input事件的默認參數裏面是一個file類型，他是Binary Large Object的一個子集，須要將Blob類型轉換成DataUrl，可以被HTML5本地的Canvas畫布解析，經過Canvas畫布根據必定的壓縮比例從新壓縮後，再將圖片轉換成Blob傳到公司公共的圖片服務器上。

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

3、具體實現邏輯後端

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);
        }