Latest web development tutorials

getImageData tela HTML () Método

HTML Manual de lona Referência HTML Manual de lona Referência

Exemplos

Os seguintes getImageData código () Cópia de dados de pixel de lona retângulo designado, e () os dados de imagem de volta para a tela por 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 »

Suporte a navegadores

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, suporte Firefox, Opera, Chrome e Safari getImageData () método.

Nota: 8 e anteriores nternet Explorer não suporta o elemento <canvas>.

Definição e Uso

getImageData () retorna ImageData objeto que é uma cópia dos dados de pixel de lona retangular especificada.

Nota: ImageData objecto não é a imagem, o que proporciona uma porção da tela (rectângulo), e guardado dentro do rectângulo de informação de cada pixel.

ImageData objeto para cada pixel, existem quatro áreas de informação, ou seja, valores RGBA:

R - vermelha (0-255)
G - Verde (0-255)
B - azul (0-255)
A - canal alfa (0-255; 0 é transparente, 255 é totalmente visível)

cor / informação alpha na forma de uma matriz e armazenados em ImageData objeto de dados propriedades.

Dica: gama completa de informações de cor / alpha na operação, você pode usar putImageData () método dos dados da imagem são copiados de volta para a tela.

exemplo:

O código a seguir pode ser obtido objeto ImageData é retornado na informação de cor / alpha primeiro pixel:

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

tentar

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

Use esta fórmula através de todos os pixels, e alterar seus valores de cor:

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

Olhe para o seguinte "tentar" exemplo!

sintaxe JavaScript

sintaxe JavaScript: contexto .getImageData (x, y, largura, altura);

parâmetro Valor

参数 描述
x 开始复制的左上角位置的 x 坐标（以像素计）。
y 开始复制的左上角位置的 y 坐标（以像素计）。
width 要复制的矩形区域的宽度。
height 要复制的矩形区域的高度。

Exemplos

mais exemplos

A imagem que você deseja usar:

o grito

Exemplos

Use getImageData () para inverter a cor de cada pixel da imagem sobre a 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 »

HTML Manual de lona Referência HTML Manual de lona Referência