Método createImageData() do HTML canvas

Manual de referência do Canvas HTML5

Definição e uso

createImageData() Método para criar um novo objeto ImageData vazio. O valor padrão dos pixels do novo objeto é preto transparente.

Para cada pixel do objeto ImageData, existem quatro tipos de informações, ou seja, os valores RGBA:

  • R - vermelho (0-255)
  • G - verde (0-255)
  • B - azul (0-255)
  • A - canal alpha (0-255; 0 é transparente, 255 é completamente visível)

Portanto, preto transparente é representado por (0,0,0,0).

As informações de cor/alfa existem em forma de array e, uma vez que o array contém quatro informações para cada pixel, o tamanho do array é quatro vezes maior que o do objeto ImageData. (Há uma maneira mais simples de obter o tamanho do array, usando ImageDataObject.data.length)

O array que contém as informações de cor/alfa é armazenado no data propriedade.

Dica:Após operar as informações de cor/alfa no array, você pode usar putImageData() O método copia os dados da imagem de volta para a tela.

Exemplo:

Esta sintaxe muda o primeiro pixel do objeto ImageData para vermelho:

imgData = ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

Esta sintaxe muda o segundo pixel do objeto ImageData para vermelho:

imgData = ctx.createImageData(100, 100);
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

Exemplo

Crie um objeto ImageData de 100x100 pixels, onde cada pixel é vermelho, e coloque-o na tela:

Seu navegador não suporta a tag HTML5 canvas.

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);

Experimente pessoalmente

Sintaxe

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

1. Crie um novo objeto ImageData com o tamanho especificado (em pixels):

var imgData=context.createImageData(width,height);

2. Crie um novo objeto ImageData do mesmo tamanho que outro objeto ImageData especificado (não copia os dados da imagem):

var imgData=context.createImageData(imageData);

Valor do parâmetro

Parâmetro Descrição
width Largura do objeto ImageData, em pixels.
height Altura do objeto ImageData, em pixels.
imageData Outro objeto ImageData.

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou a primeira vez essa propriedade.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Observação:Os navegadores Internet Explorer 8 e anteriores não suportam o elemento <canvas>.

Manual de referência do Canvas HTML5