Metodo getImageData() della tela HTML
Esempio
Il codice seguente copia i dati dei pixel per un rettangolo specificato sull'area di disegno con getImageData(), quindi rimette i dati dell'immagine sull'area di disegno con 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);
}
Supporto del browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente il metodo.
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definizione e utilizzo
Il metodo getImageData() restituisce un oggetto ImageData che copia i dati dei pixel per il rettangolo specificato su un'area di disegno.
Nota: l'oggetto ImageData non è un'immagine, specifica una parte (rettangolo) sulla tela e contiene le informazioni di ogni pixel all'interno di quel rettangolo.
Per ogni pixel in un oggetto ImageData ci sono quattro informazioni, i valori RGBA:
R - Il colore rosso (da 0-255)
G - Il colore verde (da 0-255)
B - Il colore blu (da 0-255)
A - Il canale alfa (da 0-255; 0 è trasparente e 255 è completamente visibile)
Le informazioni sul colore/alfa sono contenute in una matrice e sono archiviate nella proprietà dei dati dell'oggetto ImageData.
Suggerimento: dopo aver manipolato le informazioni sul colore/alfa nell'array, puoi copiare nuovamente i dati dell'immagine sulla tela con il metodo putImageData() .
Esempio:
Il codice per ottenere informazioni sul colore/alfa del primo pixel nell'oggetto ImageData restituito:
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
Suggerimento: puoi anche utilizzare il metodo getImageData() per invertire il colore di ogni pixel di un'immagine sulla tela.
Passa attraverso tutti i pixel e cambia i valori del colore usando questa formula:
red = 255-old_red;
green = 255-old_green;
blue = 255-old_blue;
Vedi sotto per un esempio "Provalo tu stesso"!
Sintassi JavaScript
| sintassi JavaScript: | contesto .getImageData ( x, y, larghezza, altezza ); |
|---|
Valori dei parametri
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
Altri esempi
Immagine da utilizzare:
Esempio
Usa getImageData() per invertire il colore di ogni pixel di un'immagine sulla tela:
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);
❮ Oggetto Tela