Canvas getImageData() 方法
示例
複製畫布上指定矩形的畫素資料，然後將影像資料重新放回畫布
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy() {
const imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
}
自己動手試一試 »
更多示例見下文。
描述
getImageData() 方法返回一個 ImageData 物件，該物件複製畫布上指定矩形的畫素資料。
注意：ImageData 物件不是圖片，它指定了畫布上的一個部分（矩形），並儲存了該矩形內每個畫素的資訊。
ImageData 物件中的每個畫素有四條資訊，即 RGBA 值
R - 紅色（0-255）
G - 綠色（0-255）
B - 藍色（0-255）
A - Alpha 通道（0-255；0 表示透明，255 表示完全可見）
顏色/透明度資訊儲存在一個數組中，並存儲在 ImageData 物件的 data 屬性中。
提示：在您運算元組中的顏色/透明度資訊後，您可以使用 putImageData() 方法將影像資料重新複製到畫布上。
示例
獲取返回的 ImageData 物件中第一個畫素的顏色/透明度資訊的程式碼
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
提示：您還可以使用 getImageData() 方法反轉畫布上圖片中每個畫素的顏色。
遍歷所有畫素並使用以下公式更改顏色值
red = 255-old_red;
green = 255-old_green;
blue = 255-old_blue;
請參閱下面的“親自嘗試”示例！
語法
| context.getImageData(x, y, width, height) |
引數值
| 引數 | 描述 |
|---|---|
| x | 要複製的左上角的 x 座標（畫素） |
| y | 要複製的左上角的 y 座標（畫素） |
| width | 要複製的矩形區域的寬度 |
| height | 要複製的矩形區域的高度 |
返回值
| 影像資料物件 |
更多示例
要使用的影像
示例
使用 getImageData() 反轉畫布上圖片中每個畫素的顏色
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
const imgData = ctx.getImageData(0, 0, c.width, c.height);
// 反轉顏色
for (let i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255-imgData.data[i];
imgData.data[i+1] = 255-imgData.data[i+1];
imgData.data[i+2] = 255-imgData.data[i+2];
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 0, 0);
自己動手試一試 »
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
getImageData() 在所有現代瀏覽器中都受支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 參考
