Metodo getImageData() del canvas HTML

Manuale di riferimento del canvas HTML5

Definizione e uso

getImageData() Il metodo restituisce un oggetto ImageData, che copia i dati dei pixel del rettangolo specificato sulla lavagna.

Per ogni pixel dell'oggetto ImageData, ci sono quattro tipi di informazioni, ovvero i valori RGBA:

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

Il color/alpha esiste in forma di array e viene memorizzato nell'oggetto ImageData data proprietà.

Suggerimento:Dopo aver completato l'operazione delle informazioni di color/alpha nell'array, puoi utilizzare putImageData() Il metodo copia i dati dell'immagine sulla lavagna.

Esempio:

Il seguente codice può ottenere le informazioni di color/alpha del primo pixel dell'oggetto ImageData restituito:

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

Prova personalmente

Suggerimento:Puoi anche utilizzare il metodo getImageData() per invertire i colori di ogni pixel di un'immagine sul canvas.

Puoi utilizzare la formula per esplorare tutti i pixel e modificare i loro valori di colore:

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

(Vedi l'esempio "Prova tu stesso" sotto.).

Esempio

Esempio 1

Il seguente codice copia i dati dei pixel di un rettangolo specifico sul canvas utilizzando getImageData() e poi ripristina i dati dell'immagine utilizzando 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 personalmente

Suggerimento:Più esempi disponibili nella parte inferiore della pagina.

Sintassi

var imgData=context.getImageData(x,y,width,height);

Valore del parametro

Parametro Descrizione
x Coordinata x dell'angolo superiore sinistro del punto di partenza della copia.
y Coordinata y dell'angolo superiore sinistro del punto di partenza della copia.
width Larghezza della regione rettangolare da copiare.
height Altezza della regione rettangolare da copiare.

Più esempi

Esempio 2

Immagine da utilizzare:

The Tulip

Usa getImageData() per invertire i colori di ogni pixel dell'immagine sul canvas.

Il tuo browser non supporta il tag HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// invertire i colori
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 personalmente

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta per la prima volta questa proprietà.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.

Manuale di riferimento del canvas HTML5