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);
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 ao método.
| Method | |||||
|---|---|---|---|---|---|
| createImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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 |
❮ Objeto de tela