Método getImageData() da tela HTML
Exemplo
O código abaixo copia os dados de pixel para um retângulo especificado na tela com getImageData() e, em seguida, coloca os dados da imagem de volta na 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);
}
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao método.
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | Yes | 9.0 | Yes | Yes | Yes |
Definição e uso
O método getImageData() retorna um objeto ImageData que copia os dados de pixel para o retângulo especificado em uma tela.
Nota: O objeto ImageData não é uma imagem, ele 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 existem quatro informações, os valores RGBA:
R - A cor vermelha (de 0-255)
G - A cor verde (de 0-255)
B - A cor azul (de 0-255)
A - O canal alfa (de 0-255; 0 é transparente e 255 é totalmente visível)
As informações de cor/alfa são mantidas em uma matriz e são armazenadas na propriedade data do objeto ImageData.
Dica: Depois de manipular as informações de cor/alfa no array, você pode copiar os dados da imagem de volta para a tela com o método putImageData() .
Exemplo:
O código para obter informações de cor/alfa do primeiro pixel no objeto ImageData retornado:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Dica: Você também pode usar o método getImageData() para inverter a cor de todos os pixels de uma imagem na tela.
Percorra todos os pixels e altere os valores de cor usando esta fórmula:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Veja abaixo um exemplo "Experimente você mesmo"!
Sintaxe JavaScript
| Sintaxe JavaScript: | context .getImageData( x,y,largura,altura ); |
|---|
Valores de parâmetro
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
Mais exemplos
Imagem para usar:
Exemplo
Use getImageData() para inverter a cor de cada pixel de uma imagem na 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
var i;
for (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);
❮ Referência de tela HTML