前言

相信大家都做過圖片上傳相關(guān)的功能，在圖片上傳的過程中，不知道大家有沒有考慮過文件體積的問題，如果我們直接將原圖片上傳，可以圖片體積比較大，一是上傳速度較慢，二是前端進(jìn)行渲染時速度也比較慢，比較影響客戶的體驗(yàn)感。所以在不影響清晰度的情況下，前端可以在上傳前對圖片的大小體積進(jìn)行壓縮，壓縮到一個比較合適的大小進(jìn)行上傳，本文就帶大家一起來看看前端 JS 如何實(shí)現(xiàn)圖片壓縮，有需要的小伙伴抓緊收藏一下吧！

原理（必看）

省流：主要使用 canvas的 drawImage 方法先繪制為 canvas 圖像，再結(jié)合 toDataURL 轉(zhuǎn)化為DataURl 進(jìn)行存儲圖片鏈接。

drawImage簡單介紹

Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多種在畫布Canvas）上繪制圖像的方式。

用法如下：

CanvasRenderingContext2D.drawImage() - Web API 接口參考 | MDN (mozilla.org)

語法如下：

drawImage(image, dx, dy);
drawImage(image, dx, dy, dWidth, dHeight);
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

 我們使用第二種進(jìn)行繪制，參數(shù)含義如下：

image：繪制到上下文的元素。

dx：image 的左上角在目標(biāo)畫布上 X 軸坐標(biāo)。

dy：image 的左上角在目標(biāo)畫布上 Y 軸坐標(biāo)。

dWidth：image 在目標(biāo)畫布上繪制的寬度。允許對繪制的 image 進(jìn)行縮放。如果不說明，在繪制時 image 寬度不會縮放。

dHeight：image 在目標(biāo)畫布上繪制的高度。允許對繪制的 image 進(jìn)行縮放。如果不說明，在繪制時 image 高度不會縮放。

簡單示例

注意：如果隨意的修改圖像的尺寸，會導(dǎo)致圖像失真，我們可以先獲取到圖像資源的原始尺寸，然后進(jìn)行等比縮放，意思就是當(dāng)我們確定設(shè)置寬度之后，高度要進(jìn)行等比調(diào)整。公式就是交叉相乘積相等。

        // 如果寬度設(shè)置為 500， 那么高度也應(yīng)該進(jìn)行等比縮放
        // naturalWidth         =>  500
        // naturalHeight        =>  X
        // naturalWidth * X     =   naturalHeight * 500

       //  計算得出高度
        X =   naturalHeight * 500 / naturalWidth