Metodo Canvas getImageData()

Manuale di riferimento Canvas

Definizione e uso

getImageData() Il metodo restituisce un oggetto ImageData, che copia i dati dei pixel di un rettangolo specificato sul canvas.

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)

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

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

Esempio:

Il seguente codice ottiene le informazioni di colore/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 a farlo tu stesso

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

Utilizzare questa formula per iterare attraverso tutti i pixel e modificare i loro valori di colore:

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

(Vedere l'esempio di "Prova personalmente" sottostante.)

Esempio

Esempio 1

Il seguente codice copia i dati dei pixel di un rettangolo specifico sul canvas utilizzando getImageData(), 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 a farlo tu stesso

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

Sintassi

var imgData = context.getImageData(x,y,Larghezza,Altezza);

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.
Larghezza Larghezza della regione rettangolare da copiare.
Altezza 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 a farlo tu stesso

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente 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 Canvas