前端經過canvas實現圖片壓縮

時間 2019-11-19

標籤前端經過 canvas 實現圖片壓縮简体版

原文原文鏈接

在一次的項目中，須要用戶上傳圖片，目前市場隨便一個手機拍出來的照片都是好幾兆，直接上傳特別佔用帶寬，影響用戶體驗，因此要求對用戶上傳圖片進行壓縮後再上傳；那麼前端怎麼實現這個功能呢？javascript

親測可將4M圖片壓縮至100kb左右，代碼以下：html

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