例
复制下面的代码与在画布上指定的矩形的像素数据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); 试一试»