Método getImageData() do canvas HTML

Manual de referência do Canvas do HTML5

Definição e uso

getImageData() O método retorna um objeto ImageData, que copia os dados de pixels do retângulo especificado no canvas.

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 color/alpha existem em forma de array e são armazenadas no objeto ImageData data propriedade.

Dica:Após operar as 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:

A seguir, o 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 específica na tela.

Use a fórmula a seguir 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 você mesmo" abaixo.)

Exemplo

Exemplo 1

O código a seguir 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 de 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 fornecidos na parte inferior da página.

Sintaxe

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

Valores dos parâmetros

Parâmetros 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:

A Tulipa

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

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

Manual de referência do Canvas do HTML5