如何將圖片畫到canvas上？都有哪些方法？

王铁柱6發表於2024-11-30
Canvas

在前端開發中，可以使用多種方法將圖片繪製到 canvas 元素上。以下是幾種常見的方法：

1. drawImage() 方法:

這是最常用的方法，也是功能最強大的方法。drawImage() 允許你繪製整個影像或影像的一部分到 canvas 上，還可以縮放和裁剪影像。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = function() {
  // 繪製完整影像
  ctx.drawImage(img, 0, 0);

  // 繪製縮放影像
  ctx.drawImage(img, 0, 100, 50, 50); // 目標區域 x, y, width, height

  // 繪製裁剪影像
  ctx.drawImage(img, 10, 10, 50, 50, 150, 0, 100, 100); // 源區域 x, y, width, height, 目標區域 x, y, width, height
};

img.src = 'image.jpg';

2. 使用 createPattern() 建立圖案:

createPattern() 方法允許你建立一個重複的影像圖案，然後可以使用該圖案填充或描邊 canvas 上的形狀。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = function() {
  const pattern = ctx.createPattern(img, 'repeat'); // repeat, repeat-x, repeat-y, no-repeat
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};

img.src = 'image.jpg';

3. 使用 putImageData() 繪製影像資料:

如果你已經擁有影像的畫素資料（例如，透過 getImageData() 獲取），可以使用 putImageData() 方法將資料繪製到 canvas 上。這種方法通常用於影像處理和操作。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, img.width, img.height);
  // ... 對 imageData 進行處理 ...
  ctx.putImageData(imageData, 0, 0);
};

img.src = 'image.jpg';

4. SVG <image> 標籤 (在SVG canvas中):

如果你的 canvas 是 SVG 格式的，你可以使用 <image> 標籤直接嵌入影像。

<svg width="200" height="200">
  <image href="image.jpg" x="0" y="0" width="200" height="200" />
</svg>

選擇哪種方法？

  • 對於簡單的影像繪製和操作，drawImage() 是最直接和最有效的方法。
  • 對於建立重複圖案，createPattern() 是最佳選擇。
  • 對於需要直接操作畫素資料的場景，putImageData() 非常有用。
  • 對於 SVG canvas，<image> 標籤提供了一種簡單的方式來嵌入影像。

記住，在使用 drawImage() 和 createPattern() 時，需要確保影像已完全載入後再進行繪製，否則可能會導致繪製失敗。 使用 onload 事件監聽影像載入完成是一個很好的實踐。

相關文章