tutoriais mais recente desenvolvimento web
 

HTML canvas getImageData() Method

<Object Canvas

Exemplo

O código abaixo cópias dos dados de pixel para um rectângulo especificado na tela com getImageData() , e depois colocar os dados de imagem para trás sobre 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 navegador

Os números na tabela especificar a primeira versão do navegador que suporta totalmente o método.

Método
getImageData() 4.0 9 3,6 4.0 10.1

Definição e Uso

O getImageData() método devolve um objecto ImageData que copia os dados pixel para o rectângulo especificado em uma lona.

Note: O objeto ImageData não é uma imagem, ele especifica uma parte (rectangle) na tela, e contém informações de cada pixel dentro daquele retângulo.

Para cada pixel em um objeto ImageData há quatro peças de informação, os valores RGBA:

R - A cor vermelha (from 0-255)
G - A cor verde (from 0-255)
B - A cor azul (from 0-255)
A - O canal alfa (from 0-255; 0 is transparent and 255 is fully visible)

A informação de cor / alfa é realizada em uma matriz, e é armazenada na dados de propriedade do objecto ImageData.

Tip: 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.

Example:

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

Tip: Você também pode usar o getImageData() método para inverter a cor de cada pixels 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 a "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 (in pixels) do canto superior esquerdo para iniciar a cópia de
y A coordenada y (in 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

Exemplos

mais Exemplos

Imagem a ser usada:

O grito

Exemplo

Use getImageData() para inverter a cor de cada pixels de uma imagem na tela:

YourbrowserdoesnotsupporttheHTML5canvastag.

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 "

<Object Canvas