Tela HTML método createImageData()

Exemplo

Crie um objeto ImageData de 100*100 pixels em que cada pixel seja vermelho e coloque-o na 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 ao método.

Method
createImageData()	Yes	9.0	Yes	Yes	Yes

Definição e uso

O método createImageData() cria um novo objeto ImageData em branco. Os valores de pixel do novo objeto são pretos transparentes por padrão.

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)

Assim, o preto transparente indica: (0,0,0,0).

As informações de cor/alfa são mantidas em uma matriz e, como a matriz contém 4 informações para cada pixel, o tamanho da matriz é 4 vezes o tamanho do objeto ImageData: largura*altura*4. (Uma maneira mais fácil de encontrar o tamanho da matriz é usar ImageDataObject.data.length)

A matriz que contém as informações de cor/alfa é armazenada na propriedade data do objeto ImageData.

Dica: Depois de manipular as informações de cor/alfa no array, você pode copiar os dados da imagem de volta para a tela com o método putImageData() .

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;

Sintaxe JavaScript

Existem duas versões do método createImageData():

1. Isso cria um novo objeto ImageData com as dimensões especificadas (em pixels):

Sintaxe JavaScript:	var imgData= context .createImageData( largura, altura );

2. Isso cria um novo objeto ImageData com as mesmas dimensões do objeto especificado por anotherImageData (isso não copia os dados da imagem):

JavaScript syntax:	var imgData=context.createImageData(imageData);

Valores de parâmetro

Parameter	Description
width	The width of the new ImageData object, in pixels
height	The height of the new ImageData object, in pixels
imageData	anotherImageData object

❮ Referência de tela HTML