Exemplo
O código a seguir copia os dados de pixel para um retângulo especificado na tela com getImageData() , e depois colocar os dados de imagem de volta para a tela com putImageData() :
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);
} Tente você mesmo " Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| getImageData() | sim | 9 | sim | sim | sim |
Definição e Uso
O getImageData() método retorna um objeto ImageData que copia os dados de pixel para o retângulo especificado em uma lona.
Nota: O objeto ImageData não é uma imagem, especifica uma parte (retângulo) na tela, e contém informações de cada pixel dentro desse retângulo.
Para cada pixel em um objeto ImageData há quatro peças de informação, os valores RGBA:
R - A cor vermelha (0-255)
G - A cor verde (0-255)
B - A cor azul (0-255)
A - O canal alfa (0-255; 0 é transparente e 255 é totalmente visível)
A informação de cor / alfa é realizada em uma matriz, e é armazenada na data de propriedade do objecto ImageData.
Dica: Depois de ter manipulado as informações de cor / alpha na matriz, você pode copiar os dados de imagem de volta para a tela com a putImageData() método.
Exemplo:
O código para a obtenção de informações de cor / alpha do primeiro pixel no objeto ImageData retornado:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Tente você mesmo " Dica: Você também pode usar o getImageData() método para inverter a cor de cada pixel de uma imagem na tela.
Percorrer todos os pixels e alterar os valores de cor usando esta fórmula:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Veja abaixo uma "Try it Yourself" exemplo!
JavaScript Sintaxe
| sintaxe JavaScript: | context.getImageData(x,y,width,height); |
|---|
Os valores dos parâmetros
| Parâmetro | Descrição |
|---|---|
| x | A coordenada x (em pixels) do canto superior esquerdo para iniciar a cópia de |
| y | A coordenada y (em pixels) do canto superior esquerdo para iniciar a cópia de |
| width | A largura da área retangular que você vai copiar |
| height | A altura da área retangular que você vai copiar |
mais Exemplos
Imagem a ser usada:
Exemplo
Use getImageData() para inverter a cor de cada pixel de uma imagem sobre a tela:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// invert colors
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); Tente você mesmo "