Método createImageData() do Canvas

Manual de referência do Canvas

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 no 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 representa (0,0,0,0).

As informações de color/alpha existem na forma de array e, como o array contém quatro informações para cada pixel, seu tamanho é 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 color/alpha é armazenado no objeto ImageData na propriedade data nas propriedades.

Dica:Após concluir a operação das informações de color/alpha no array, você pode usar putImageData() O método copia os dados da imagem de volta para o canvas.

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 você mesmo

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 com o tamanho especificado (em pixels), sem copiar 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 o atributo.

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

Observação:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.

Manual de referência do Canvas