【前端技術】JS壓縮圖片的思路

發(fā)布時間：2024-09-20 熱度：

在開發(fā)中，相信很多人都做過圖片上傳相關功能。然而，在圖片上傳過程中，文件體積問題常常被忽視。若直接上傳原圖片，可能因體積較大導致上傳速度慢，且前端渲染時也會比較遲緩，極大地影響用戶體驗。因此，在不影響清晰度的前提下，前端可以在上傳前對圖片大小體積進行壓縮，調整到合適大小后再進行上傳。本文將詳細介紹前端 JS 如何實現圖片壓縮，有需要的小伙伴趕緊收藏起來吧！

原理（必看）

簡而言之：主要利用 canvas 的 drawImage 方法先將圖片繪制為 canvas 圖像，再通過 toDataURL 轉化為 DataURL 來存儲圖片鏈接。

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

我們使用第二種語法進行繪制，參數含義如下：

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

dx：image 的左上角在目標畫布上的 X 軸坐標。

dy：image 的左上角在目標畫布上的 Y 軸坐標。

dWidth：image 在目標畫布上繪制的寬度，可對繪制的 image 進行縮放。若不指定，繪制時 image 寬度不會縮放。

dHeight：image 在目標畫布上繪制的高度，可對繪制的 image 進行縮放。若不指定，繪制時 image 高度不會縮放。

簡單示例

注意：隨意修改圖像尺寸可能導致圖像失真。我們可以先獲取圖像資源的原始尺寸，然后進行等比縮放。即當確定設置寬度后，高度要進行等比調整，可依據交叉相乘積相等的公式進行計算。

例如，如果寬度設置為 500，那么高度也應進行等比縮放。公式為：naturalWidth * X = naturalHeight * 500，由此可計算出高度 X = naturalHeight * 500 /naturalWidth。

以下是代碼示例：

javascript

復制

var can = document.querySelector('canvas');

var context = can.getContext('2d');

var imgDom = new Image();

imgDom.src = './img.jpg';

imgDom.onload = function () {

// 注意：圖像繪制時，必須保證資源已經加載完成

console.log('圖片的原始寬度', imgDom.naturalWidth);

console.log('圖片的原始高度', imgDom.naturalHeight);

context.drawImage(

imgDom,

0, 0,

500, imgDom.naturalHeight * 500 / imgDom.naturalWidth

);

};

toDataURL 簡單介紹

將圖片繪制到 canvas 后，還需將 canvas 轉化為 Data URL。轉化為 DataURL 后，可以在屏幕上顯示，也可存儲到后端服務器。使用 canvas 提供的 toDataURL 實例方法即可。

官方解釋：HTMLCanvasElement.toDataURL () 方法返回一個包含圖片展示的 data URI。

參考：HTMLCanvasElement.toDataURL () - Web API 接口參考 | MDN (mozilla.org)。

語法：canvas.toDataURL (type, encoderOptions);

其中，type（可選）為圖片格式，默認為 image/png；encoderOptions（可選）在指定圖片格式為 image/jpeg 或 image/webp 的情況下，可以從 0 到 1 的區(qū)間內選擇圖片的質量。若超出取值范圍，將使用默認值 0.92，其他參數會被忽略。

簡單示例

javascript

復制

// 獲取壓縮后的圖片數據

can.width = imgDom.naturalWidth;

can.height = imgDom.naturalHeight;

const compressedData = can.toDataURL('image/jpeg', 0.6); // 可調整質量參數

console.log('compressedData: ', compressedData);

轉化后的 DataURL 結果如下。

實現

先給出全部代碼，再進行解釋。

html

復制

<!DOCTYPE html>

<html>

<head>

<title>圖片壓縮上傳</title>

</head>

<body>

<button onclick="compressAndUpload()">壓縮并上傳圖片</button>

function compressAndUpload() {

const fileInput = document.getElementById('fileInput');

const file = fileInput.files[0];

if (!file) {

alert('請先選擇要上傳的圖片');

return;

}

const reader = new FileReader();

reader.onload = function () {

const img = new Image();

img.src = reader.result;

img.onload = function () {

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

const maxWidth = 800; // 設置最大寬度為 800 像素

let width = img.width;

let height = img.height;

// 判斷是否需要縮放

if (width > maxWidth) {

height *= maxWidth / width;

width = maxWidth;

}

// 設置 canvas 的寬高

canvas.width = width;

canvas.height = height;

// 將圖片繪制到 canvas 上

ctx.drawImage(img, 0, 0, width, height);

// 獲取壓縮后的圖片數據

const compressedData = canvas.toDataURL('image/jpeg', 0.7); // 可調整質量參數

// 創(chuàng)建一個新的壓縮后的 File 對象

const compressedFile = dataURItoBlob(compressedData, file.type);

compressedFile.lastModifiedDate = file.lastModifiedDate;

compressedFile.name = file.name;

// 上傳壓縮后的圖片文件

uploadImage(compressedFile);

};

reader.readAsDataURL(file);

}

function dataURItoBlob(dataURI, mimeType) {

const binary = atob(dataURI.split(',')[1]);

const array = [];

for (let i = 0; i < binary.length; i++) {

array.push(binary.charCodeAt(i));

}

return new Blob([new Uint8Array(array)], { type: mimeType });

}

function uploadImage(compressedFile) {

const formData = new FormData();

formData.append('image', compressedFile);

fetch('/upload', {

method: 'POST',

body: formData

})

.then(response => {

if (response.ok) {

console.log('圖片上傳成功');

} else {

console.error('圖片上傳失敗');

}

})

.catch(error => {

console.error('發(fā)生錯誤:', error);

});

}

</script>

</body>

</html>

下面分析關鍵代碼部分。

首先，初始化一個 reader，它是 FileReader 對象的實例。reader.readAsDataURL(file)這行代碼將選擇的文件讀取為 Data URI 格式的字符串。執(zhí)行這行代碼時，FileReader 對象會異步讀取文件數據，讀取完成后觸發(fā) onload 事件，讀取結果存儲在 FileReader 對象的 result 屬性中，格式為 Data URI 字符串。

接著，將讀取出來的 Data URI 字符串賦值給 Image 的 src，等待 img 加載完畢后開始對 img 進行壓縮，壓縮方法如上文所示。

然后，設置最大寬度為 800，判斷當前圖片寬度是否大于該值，若大于則進行縮放計算，小于則不進行等比縮放計算。最后將計算出的值使用 drawImage 繪制到 canvas 上面。

現在，將 canvas 轉化成 Data URI 字符串，canvas.toDataURL('image/jpeg', 0.7)這行代碼將 canvas 上繪制的圖像數據導出為 JPEG 格式的 Data URI 字符串，并設置圖像質量為 0.7。

之后，創(chuàng)建一個新的壓縮后的 File 對象，通過將 Data URI 字符串轉化為 Blob 對象來實現。

最后，使用 FormData 進行上傳即可。

壓縮前后體積對比

我們看一下壓縮前后體積對比，壓縮前為 550290，壓縮后為 31523，縮小了十幾倍，壓縮效果非常明顯。

總結

前端實現圖片壓縮主要借助 canvas 來完成。實現思路是先使用 canvas 的 drawImage 方法將圖片繪制為 canvas 圖像，再結合 toDataURL 轉化為 DataURL 進行存儲圖片鏈接以及壓縮圖像質量。在 toDataURL 中可以調整圖像質量，同時，在壓縮圖像時要注意等寬高縮放，否則會導致圖像失真。