例
下面複製碼與所述畫布上的指定矩形的像素數據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() | 4 | 9 | 3.6 | 4 | 10.1 |
定義和用法
所述getImageData()方法返回的ImageData對象副本在畫布上指定的矩形的像素數據。
Note:所述的的ImageData對象不是圖片時，它指定一個部分(rectangle)在畫布上，並且保持該矩形內的每個像素的信息。
一種用於在對象的ImageData每個像素有四個信息，所述RGBA值：
的R -顏色紅(from 0-255)
摹-綠顏色(from 0-255)
乙-藍色(from 0-255)
A -阿爾法通道(from 0-255; 0 is transparent and 255 is fully visible)
顏色/ alpha信息在陣列中保持，並且被存儲在數據的的ImageData對象的屬性。
Tip:你已經操縱了陣列中的顏色/α信息之後，可以將圖像數據複製回與畫布putImageData()方法。
Example:
用於獲取在返回的ImageData對象的第一像素的顏色/α信息的代碼：
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Tip:您還可以使用getImageData()方法來翻轉畫布上的圖像的每個像素的顏色。
通過所有像素循環並改變使用此公式的顏色值：
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
請參閱下面的"Try it Yourself"的例子！
JavaScript語法
| JavaScript語法： | context 。 getImageData( x,y,width,height ) ; |
|---|
參數值
| 參數 | 描述 |
|---|---|
| x | 的x坐標(in pixels)的左上角的開始複製從 |
| y | y坐標(in pixels)的左上角的開始複製從 |
| 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); 試一試» <畫布對象