前端通过canvas实现图片压缩

在一次的项目中，需要用户上传图片，目前市场随便一个手机拍出来的照片都是好几兆，直接上传特别占用带宽，影响用户体验，所以要求对用户上传图片进行压缩后再上传；那么前端怎么实现这个功能呢？

亲测可将4M图片压缩至100kb左右，代码如下：

<input id="file" type="file">
        <script type="text/javascript">
            var eleFile = document.querySelector('#file');
            // 压缩图片需要的一些元素和对象
            var reader = new FileReader(),
            //创建一个img对象
                img = new Image();

            // 选择的文件对象
            var file = null;

            // 缩放图片需要的canvas
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');

            // base64地址图片加载完毕后
            img.onload = function() {
                // 图片原始尺寸
                var originWidth = this.width;
                var originHeight = this.height;
                // 最大尺寸限制，可通过国设置宽高来实现图片压缩程度
                var maxWidth = 800,
                    maxHeight = 800;
                // 目标尺寸
                var targetWidth = originWidth,
                    targetHeight = originHeight;
                // 图片尺寸超过400x400的限制
                if(originWidth > maxWidth || originHeight > maxHeight) {
                    if(originWidth / originHeight > maxWidth / maxHeight) {
                        // 更宽，按照宽度限定尺寸
                        targetWidth = maxWidth;
                        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                    } else {
                        targetHeight = maxHeight;
                        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                    }
                }
                // canvas对图片进行缩放
                canvas.width = targetWidth;
                canvas.height = targetHeight;
                // 清除画布
                context.clearRect(0, 0, targetWidth, targetHeight);
                // 图片压缩
                context.drawImage(img, 0, 0, targetWidth, targetHeight);
                /*第一个参数是创建的img对象；第二个参数是左上角坐标，后面两个是画布区域宽高*/
                //压缩后的图片base64 url
                /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/jpeg';
                 * qualityArgument表示导出的图片质量，只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92*/
                var newUrl = canvas.toDataURL('image/jpeg', 0.92);//base64 格式
                //console.log(canvas.toDataURL('image/jpeg', 0.92));
　　　　　　　　　　preview.style.backgroundImage='url(' + newUrl + ')';
            };

            // 文件base64化，以便获知图片原始尺寸
            reader.onload = function(e) {
                img.src = e.target.result;
            };
            eleFile.addEventListener('change', function(event) {
                file = event.target.files[0];
                // 选择的文件是图片
                if(file.type.indexOf("image") == 0) {
                    reader.readAsDataURL(file);
                }
            });
        </script>

CSS样式如下（形成图片预览效果）： 

#preview {
    display: inline-block;
    width: 2.56rem;
    height: 2.56rem;
    position: relative;
    background-image: url(img/iconfont-tianjia.png);
    background-repeat: no-repeat;
    background-size:cover ;
}            
#file {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    z-index: 5;
}

其原理是通过canvas结合js重新绘制一副 2d 图片，然后给canvas画布设置宽高来完成目标图片的压缩！

Demo地址：canvas实现图片压缩demo

详情参考HTML5 file API加canvas实现图片前端JS压缩并上传