HTML canvas ImageData dataProperty

Canvas 对象参考手册Canvas Object

Example

Create a 100*100 pixel ImageData object where each pixel is set to red:

Canvas

YourbrowserdoesnotsupporttheHTML5canvastag.

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 ExplorerFirefoxOperaGoogle ChromeSafari

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 is stored in an array in the data property of the ImageData object.

Example:

Syntax to turn 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 to turn 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:See alsocreateImageData()、 getImageData()andputImageData()method to get more knowledge about the ImageData object.

JavaScript Syntax

JavaScript Syntax: imageData.data;

Canvas 对象参考手册Canvas Object

Other Extensions