在浏览器端用H5实现图片压缩上传

摘要：一需求的场景在我们的需求中需要有一个在手机浏览器端，用户实现上传证件照片的功能，我们第一版上了一个最简版，直接让用户在本地选择图片，然后上传到公司公共的服务器上。

一、需求的场景：

在我们的需求中需要有一个在手机浏览器端，用户实现上传证件照片的功能，我们第一版上了一个最简版，直接让用户在本地选择图片，然后上传到公司公共的服务器上。
   功能实现后我们发现一个问题，公司公共的服务器有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);
        }