例
複製下面的代碼與在畫布上指定的矩形的像素數據getImageData()然後將圖像數據返回到與畫布putImageData()
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
} 試一試» 瀏覽器支持
在表中的數字指定完全支持方法的第一個瀏覽器的版本。
| 方法 | |||||
|---|---|---|---|---|---|
| getImageData() | 是 | 9 | 是 | 是 | 是 |
定義和用法
該getImageData()方法返回的ImageData對象副本在畫布上指定的矩形的像素數據。
注：的ImageData對象不是一幅畫，它指定在畫布上的一部分（矩形），並認為矩形內的每一個像素的信息。
用於在的ImageData對象的每個像素有四個條信息，所述RGBA值：
R -的紅色（0-255）
G -顏色綠色（0-255）
B -藍色（0-255）
A - alpha通道（0-255; 0是透明的，255是完全可見）
顏色/ alpha信息在陣列保持，並且被存儲在data的的ImageData對象的屬性。
提示：在操縱數組中的顏色/ alpha信息後，就可以將圖像數據複製回用畫布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;
請參閱下面的“試一試”的例子！
JavaScript語法
| JavaScript語法： | context.getImageData(x,y,width,height); |
|---|
參數值
| 參數 | 描述 |
|---|---|
| x | 在左上角的x坐標（像素）開始從複製 |
| y | 在左上角的y坐標（像素）開始從複製 |
| width | 矩形區域的寬度將複製 |
| height | 的矩形區域要複製的高度 |
更多示例
圖片使用方法：
例
使用getImageData()反轉畫布上的圖像的每一個像素的顏色：
JavaScript的：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// invert colors
for (var 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); 試一試»