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);
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);
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
| Property | |||||
|---|---|---|---|---|---|
| data | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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; |
|---|
❮ Objeto de tela