Latest web development tutorials

Metodo canvas HTML getImageData ()

HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento

Esempi

I seguenti getImageData codice () copia su tela dati pixel rettangolo designato, e () i dati dell'immagine di nuovo nella tela di 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);
}

Prova »

Supporto per il browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

metodo di Internet Explorer 9, il supporto per Firefox, Opera, Chrome e Safari getImageData ().

Nota: 8 e precedenti nternet Explorer non supporta l'elemento <canvas>.

Definizione e utilizzo

Metodo getImageData () restituisce oggetto ImageData che è una copia dei dati pixel tela rettangolare specificata.

Nota: oggetto ImageDatanon è l'immagine, che fornisce una porzione della tela (rettangolo), e salvato nelle informazioni rettangolo di ciascun pixel.

ImageData oggetto per ogni pixel, ci sono quattro aree di informazioni, vale a dire i valori RGBA:

R - rosso (0-255)
G - verde (0-255)
B - blu (0-255)
A - canale alfa (0-255; 0 è trasparente, 255 è completamente visibile)

colore / informazioni alpha in forma di matrice e immagazzinato in oggetto ImageData dati proprietà.

Suggerimento: gamma completa di informazioni sul colore / alfa nel funzionamento, è possibile utilizzare putImageData () il metodo dei dati di immagine viene copiata torna alla tela.

esempio:

oggetto ImageData Il seguente codice può essere ottenuto viene restituito nel primo pixel informazioni sul colore / alpha:

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

provare

Suggerimento: È inoltre possibile utilizzare il metodo getImageData () per invertire il colore di ogni pixel di un'immagine sulla tela.

Utilizzare questa formula attraverso tutti i pixel, e cambiare i suoi valori di colore:

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

Guardate il seguente esempio "provare"!

sintassi JavaScript

sintassi JavaScript: contesto .getImageData (x, y, larghezza, altezza);

Valore parametro

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

Esempi

Altri esempi

L'immagine che si desidera utilizzare:

l'urlo

Esempi

Utilizzare getImageData () per invertire il colore di ogni pixel dell'immagine sulla 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);

Prova »

HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento