Elaborazione dei pixel Canvas HTML5

Metodo di utilizzo della funzione createImageData() per la gestione dei pixel del canvas HTML5. Esempio online di gestione dei pixel del canvas, come copiare i pixel sul canvas, definizione della sintassi e dettagli delle proprietà, ecc.

Puoi accedere a tutti i pixel del canvas HTML5. Puoi eseguire questa operazione utilizzando l'oggetto ImageData. L'oggetto ImageData contiene un array di pixel. Accedendo a questo array, puoi manipolare i pixel. Dopo aver completato le operazioni sui pixel, devi copiarli sul canvas per mostrarli.

Creare un oggetto ImageData

La creazione di un oggetto ImageData è completata utilizzando la funzione createImageData() delle funzionalità del contesto 2D. Ecco un esempio:

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
var width = 100;
var height = 100;
var imageData = context.createImageData(width, height);

La funzione createImageData() impostata dagli attributi width e height della funzione setta la larghezza e l'altezza dell'area dei pixel rappresentata dall'oggetto ImageData creato (in pixel). L'esempio crea un oggetto ImageData con una superficie di 100 x 100 pixel.

Attributi ImageData

L'oggetto ImageData ha tre attributi:

• width

• height

• data

Gli attributi width e height contengono la larghezza e l'altezza dell'area dei dati del grafico.
L'attributo data è un array di byte che contiene i valori dei pixel.

Elaborazione dei pixel

　Ogni pixel nell'array data contiene un valore di 4 byte. Rosso, verde e blu rappresentano un valore, mentre il canale alpha un altro. Il colore del pixel è determinato mescolando rosso, verde e blu per formare il colore finale. Il canale alpha spiega la trasparenza del pixel. Ogni valore di rosso, verde, blu e alpha può essere un numero compreso tra 0 e 255.
Questo è un esempio di codice per impostare il colore e il valore Alpha del primo pixel:

var pixelIndex = 0;
imageData.data[pixelIndex] = 255; // colore rosso
imageData.data[pixelIndex + 1] = 0; // colore verde
imageData.data[pixelIndex + 2] = 0; // colore blu
imageData.data[pixelIndex + 3] = 255;

Utilizza il seguente codice per leggere i valori dei pixel:

var pixelIndex = 0;
var red = imageData.data[pixelIndex]; // colore rosso
var green = imageData.data[pixelIndex + 1]; // colore verde
var blue = imageData.data[pixelIndex + 2]; // colore blue
var alpha = imageData.data[pixelIndex + 3];

Per accedere al valore pixelIndex del pixel successivo, aumentare il valore di 4 (ogni pixel è composto da 4 elementi di array, come mostrato sopra).
Puoi calcolare l'indice di un pixel dato così:

　var index = 4 * (x + y * width);

Le coordinate x e y nel calcolo sono calcolate come indici a partire dalle coordinate y del pixel x.
Questo è un grafico che spiega l'array di pixel di ImageData di 20 pixel di larghezza e 8 pixel di altezza. Nella margine destra è elencato l'indice di ogni riga di pixel. Come vedete, l'enumerazione degli indici inizia da 0 nell'angolo in alto a sinistra e aumenta a destra. Quando si raggiunge l'angolo estremo di una riga, l'enumerazione continua dal pixel più a sinistra della riga sottostante e aumenta a destra.

Copiare i pixel sul canvas

Dopo aver elaborato i pixel, è possibile usarne le funzionalità del contesto 2D per copiarli sul canvas con putImageData(). La funzione putImageFunction() ha due versioni. La prima versione della funzione putImageData() copia tutti i pixel sul canvas. Ecco un esempio:

var canvasX = 25;
var canvasY = 25;
context.putImageData(imageData, canvasX, canvasY);

I parametri canvasX e canvasY sono le coordinate y del pixel inserito nel canvas.
La seconda versione della funzione putImageData() può copiare il rettangolo di pixel invece di tutti i pixel sul canvas. Ecco un esempio di codice:

var canvasX = 25;
var canvasY = 25;
var sx = 0;
var sy = 0;
var sWidth = 25;
var sHeight = 25;
context.putImageData(imageData, canvasX, canvasY, sx, sy, sWidth, sHeight);

I parametri sx e sy (sourceX e sourceY) sono le coordinate x e y dell'angolo in alto a sinistra del rettangolo, in pixel, per copiare dall'array di pixel.
I parametri sWidth e sHeight (sourceWidth e sourceHeight) sono la larghezza e l'altezza del rettangolo, in pixel, per copiare dall'array di pixel.

Recupero dei pixel dal canvas

È anche possibile catturare un rettangolo di pixel dal canvas in un oggetto ImageData. Questo viene fatto utilizzando la funzione getImageData(). Ecco un esempio:

var x = 25;
var y = 25;
var width = 100;
var height = 100;
var imageData2 = context.getImageData(x, y, width, height);

I parametri x e y sono le coordinate dell'angolo in alto a sinistra del rettangolo del canvas.
I parametri width e height sono la larghezza e l'altezza del rettangolo del canvas.