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