Canvas 2D 圖像處理：瀏覽器端像素操作的原理與實務

Canvas 在圖像處理中的角色

瀏覽器提供了三種圖像處理路徑：

方案	效能	彈性	適用
CSS filter	高（GPU）	低（預設濾鏡）	簡單視覺效果
Canvas 2D	中	高（像素級）	壓縮、裁剪、格式轉換
WebGL	最高	高（需 shader）	複雜濾鏡、即時處理

工具庫的圖片工具（壓縮、裁剪、格式轉換、浮水印）全部基於 Canvas 2D API。

---

基本處理流程

// 1. 載入圖片
const img = new Image();
img.src = URL.createObjectURL(file);
await img.decode();

// 2. 建立 Canvas 並繪製
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d')!;
ctx.drawImage(img, 0, 0);

// 3. 匯出為目標格式
const blob = await new Promise<Blob>((resolve) =>
  canvas.toBlob(resolve, 'image/webp', 0.85) // 品質 85%
);

---

圖片壓縮原理

Canvas 壓縮本質是重新編碼：

原始 PNG (2MB, 無損)
     ↓ drawImage 到 Canvas
     ↓ toBlob('image/jpeg', 0.8)
壓縮 JPEG (400KB, 有損 80% 品質)

格式	壓縮方式	典型壓縮率	透明度
JPEG	有損 DCT	60-80%	❌
WebP	有損/無損	70-90%	✅
PNG	無損 DEFLATE	10-30%	✅
AVIF	有損/無損	80-95%	✅

工具庫 圖片壓縮工具 支援批次 WebP/JPEG 壓縮，預設品質 85% 在體積與畫質間取得最佳平衡。

---

像素級操作

透過 ImageData 直接操作 RGBA 像素：

const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data; // Uint8ClampedArray, 每 4 位元組 = 1 像素

for (let i = 0; i < data.length; i += 4) {
  // 灰階化
  const avg = (data[i] + data[i+1] + data[i+2]) / 3;
  data[i] = data[i+1] = data[i+2] = avg;
}

ctx.putImageData(imageData, 0, 0);

---

OffscreenCanvas 效能優化

主執行緒 Canvas 操作會阻塞 UI。OffscreenCanvas 可在 Worker 中執行：

// worker.ts
const offscreen = new OffscreenCanvas(width, height);
const ctx = offscreen.getContext('2d')!;
ctx.drawImage(imageBitmap, 0, 0);
const blob = await offscreen.convertToBlob({ type: 'image/webp', quality: 0.85 });
postMessage({ blob }, [blob]); // Transferable

批次處理 50 張圖片時，OffscreenCanvas + Worker 可將主執行緒阻塞從 10s 降至 0。

---

常見問題

為什麼壓縮後圖片變模糊？

JPEG/WebP 有損壓縮會遺失高頻細節。提高品質參數（0.9+）或使用 PNG/WebP 無損模式。

Canvas 有尺寸限制嗎？

大多數瀏覽器限制 Canvas 單邊最大 16384px，總面積約 268MP。超過此限制需要分塊處理。

如何處理 EXIF 方向資訊？

手機拍攝的照片可能含 EXIF Orientation。繪製前需讀取 EXIF 並旋轉 Canvas，否則圖片方向錯誤。工具庫 圖片格式轉換 會自動處理 EXIF。

---

總結

Canvas 2D 是瀏覽器端圖像處理的標準方案。理解 drawImage → toBlob 的編碼鏈路、ImageData 的像素操作，以及 OffscreenCanvas 的 Worker 卸載，是建構高效能圖片工具的核心能力。