在浏览器端用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);
        }