Método Canvas getImageData()

Manual de referência do Canvas

Definição e uso

getImageData() O método retorna um objeto ImageData, que copia os dados de pixels de um retângulo específico da tela.

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)

As informações de cor/alpha existem em forma de array e são armazenadas no objeto ImageData data propriedade.

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

Exemplo:

O seguinte código pode obter as informações de cor/alpha do primeiro pixel do objeto ImageData retornado:

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

Experimente pessoalmente

Dica:Você também pode usar o método getImageData() para inverter a cor de cada pixel de uma imagem na tela.

Use essa fórmula para percorrer todos os pixels e alterar seus valores de cor:

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

(Veja o exemplo 'Experimente por conta própria' abaixo.)

Exemplo

Exemplo 1

O código abaixo usa getImageData() para copiar os dados dos pixels de um retângulo específico na tela e, em seguida, usa putImageData() para reposicionar os dados da imagem na tela:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy()
{
var imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
}

Experimente pessoalmente

Dica:Mais exemplos no rodapé da página.

Sintaxe

var imgData = context.getImageData(x,y,width,height);

Valor do parâmetro

Parâmetro Descrição
x Coordenada x do canto superior esquerdo do início da cópia.
y Coordenada y do canto superior esquerdo do início da cópia.
width Largura da área retangular a ser copiada.
height Altura da área retangular a ser copiada.

Mais exemplos

Exemplo 2

Imagem a ser usada:

The Tulip

Use getImageData() para inverter a cor de cada pixel da imagem na tela.

Seu navegador não suporta a tag HTML5 canvas.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 0, 0);
var imgData=ctx.getImageData(0, 0, c.width, c.height);
// Inverter cores
for (var i = 0; i < imgData.data.length; i += 4)
  {
  imgData.data[i] = 255 - imgData.data[i];
  imgData.data[i + 1] = 255 - imgData.data[i + 1];
  imgData.data[i + 2] = 255 - imgData.data[i + 2];
  imgData.data[i + 3] = 255;
  }
ctx.putImageData(imgData, 0, 0);

Experimente pessoalmente

Suporte do navegador

Os números na tabela indicam a versão do navegador que suporta completamente essa propriedade.

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