Propriedade de dados ImageData da tela HTML

Exemplo

Crie um objeto ImageData de 100*100 pixels em que cada pixel é definido para a cor vermelha:

Tela

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
var i;
for (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);

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.

Property
data	Yes	9.0	Yes	Yes	Yes

Definição e uso

A propriedade data retorna um objeto que contém dados de imagem do objeto ImageData especificado.

Para cada pixel em um objeto ImageData existem quatro informações, os valores RGBA:

R - A cor vermelha (de 0-255)
G - A cor verde (de 0-255)
B - A cor azul (de 0-255)
A - O canal alfa (de 0-255; 0 é transparente e 255 é totalmente visível)

As informações de cor/alfa são mantidas em uma matriz e são armazenadas na propriedade data do objeto ImageData.

Exemplos:

A sintaxe para tornar o primeiro pixel no objeto ImageData vermelho:

imgData=ctx.createImageData(100, 100);

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

A sintaxe para tornar o segundo pixel no objeto ImageData verde:

imgData = ctx.createImageData(100, 100);

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

Dica: Veja createImageData() , getImageData() e putImageData() para saber mais sobre o objeto ImageData.

Sintaxe JavaScript

Sintaxe JavaScript:	imageData .data;

❮ Referência de tela HTML