HTML canvas ImageData dataProperty

HTML canvas 参考手册 HTML canvas Reference Manual

Examples

Create a 100*100 pixel ImageData object, in which every pixel is set to red:

Canvas

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);

Try it Yourself »

Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the ImageData data property.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and Usage

The data property returns an object that contains the image data of the specified ImageData object.

For each pixel in the ImageData object, there are four pieces of information, namely the RGBA values:

R - Red (0-255)
G - Green (0-255)
B - Blue (0-255)
A - Alpha channel (0-255; 0 is transparent, 255 is fully visible)

The color/alpha information exists in the form of an array and is stored in the data property of the ImageData object.

Example:

Syntax for turning the first pixel in the ImageData object red:

imgData=ctx.createImageData(100,100);

imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

Syntax for turning the second pixel in the ImageData object green:

imgData=ctx.createImageData(100,100);

imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Tip:Please refer tocreateImageData()、 getImageData()andputImageData()method, to learn more about the ImageData object.

JavaScript Syntax

JavaScript Syntax:	imageData.data;

HTML canvas Reference Manual Other Extensions

HTMLTag