前端通過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壓縮並上傳