圖片壓縮原理

• CanvasRenderingContext2D.drawImage() 方法可以從頁面 DOM 元素作為圖像源來根據(jù)坐標(biāo)和大小重新繪制該圖像。
• HTMLCanvasElement.toDataURL() 和 HTMLCanvasElement.toBlob() 方法支持導(dǎo)出為 base64 字符串或 Blob 對象。

CanvasRenderingContext2D.drawImage()

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

• image
  • 繪制到上下文的元素。允許任何的畫布圖像源，包括 canvas、img、svg、video 元素和 ImageBitmap 對象等。
• dx, dy, dWidth, dHeight
  • 這幾個(gè)屬性表示在 canvas 畫布上指定一片區(qū)域用來放置圖片，dx、dy 指定圖片左上角在 canvas 上的坐標(biāo)，dWidth、dHeight 指定圖片在 canvas 上繪制的區(qū)域?qū)捀摺Ｈ绻麤]有指定 sx、sy、sWidth、sHeight 這4個(gè)參數(shù)，則圖片會(huì)被拉伸或縮放在 canvas 區(qū)域內(nèi)。
• sx, sy, swidth, sheight
  • 這幾個(gè)屬性是針對圖片元素的，表示圖片在 canvas 畫布上顯示的大小和位置。sx、sy 表示圖片上作為左上角的坐標(biāo)，然后往右下角 swidth、sheight 尺寸范圍圖片作為最終在 canvas 上顯示的圖片內(nèi)容。

圖片壓縮，需要使用的是 CanvasRenderingContext2D.drawImage() 5個(gè)參數(shù)的語法，即指定圖片左上角在 canvas 上的坐標(biāo)為 0，圖片在 canvas 上繪制的區(qū)域?qū)捀邽?canvas 的寬高即可。例如，圖片的原始尺寸是 4000*3000，現(xiàn)在要把尺寸限制為 400*300 大小。

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 300;
context.drawImage(img,0,0,canvas.width,canvas.height);

如果需要將轉(zhuǎn)換后的圖像渲染到頁面 DOM 元素，可以使用 HTMLCanvasElement.toDataURL() 方法來獲取轉(zhuǎn)換后的圖像 base64 格式信息的字符串傳遞給 img 元素的 src?；蚴褂?HTMLCanvasElement.toBlob() 方法獲取 Blob 格式的對象，然后使用 URL.createObjectURL() 獲取對象 URL 傳遞給 img 元素的 src。也可以將該 base64 字符串或 Blob 對象上傳到后端服務(wù)器。

HTMLCanvasElement.toDataURL()

該方法將圖片轉(zhuǎn)換成 base64 格式信息的字符串表示法。

toDataURL()
toDataURL(type)
toDataURL(type, encoderOptions)

• type 可選
  • 圖片格式，默認(rèn)為 image/png。file 對象中的 file.type 屬性可以傳到此參數(shù)。
• encoderOptions 可選
  • 在指定圖片格式為 image/jpeg 或 image/webp 時(shí)，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍，將會(huì)使用默認(rèn)值 0.92。其他參數(shù)會(huì)被忽略。

HTMLCanvasElement.toBlob()

• 比 HTMLCanvasElement.toDataURL() 方法多了一個(gè) callback 參數(shù)，其他參數(shù)相同。
• 無返回值。
• 該方法是異步的，所以需要在 callback 回調(diào)方法中處理轉(zhuǎn)換結(jié)果，回調(diào)參數(shù)是轉(zhuǎn)換好的包含 canvas 畫布上的圖像的 Blob 對象，如果圖像未被成功創(chuàng)建，可能會(huì)獲得 null 值。

toBlob(callback)
toBlob(callback, type)
toBlob(callback, type, quality)

示例

下面原始圖片的大小為 84867 字節(jié)（大約 83KB），壓縮后大小僅為 16354 字節(jié)（約 16KB）。

(async function() {
  const {size, type} = await fetch(img.src).then(res=>res.blob());
  result.textContent += JSON.stringify({size, type});
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.width = 400;
  canvas.height = 300;
  context.drawImage(img,0,0,400,300);
  img2.src = canvas.toDataURL(type);
  canvas.toBlob(({size, type}) => result2.textContent += JSON.stringify({size, type}), type);
})()

以上就是Canvas drawImage方法實(shí)現(xiàn)圖片壓縮詳解的詳細(xì)內(nèi)容，更多關(guān)于Canvas drawImage 壓縮圖片的資料請關(guān)注腳本之家其它相關(guān)文章！