Video: Corso HTML5 ITA - 21 CANVAS: manipolare una immagine a livello di pixel 2024
Con HTML5, puoi estrarre i dati di un tag canvas nei dati dei pixel sottostanti. La manipolazione di questi dati ti offre un controllo completo dell'immagine in tempo reale. È possibile utilizzare questi dati per il bilanciamento del colore e per sperimentare con le proprie sfocature, nitidezza e effetti cromatici.
Indipendentemente dal formato in cui è memorizzata un'immagine nel file system, viene visualizzato come un elenco di pixel. Ogni pixel è rappresentato (nel sistema standard a 32 bit, comunque) da quattro numeri interi: RGBA. La R rappresenta quanto rosso è nel punto corrente, G sta per verde e B sta per blu. La A sta per alfa, che è una misura della trasparenza dell'immagine. Ognuno di questi valori può variare da 0 a 255. Quando converti un'immagine nel formato dei dati dell'immagine, ottieni una vasta gamma di numeri interi. Ogni gruppo di quattro immagini rappresenta un singolo pixel di dati a colori.
Questo codice cambia il bilanciamento del colore di un'immagine:
funzione draw () {var drawing = document. getElementById ("elaborazione"); var con = disegno. getContext ("2d"); var original = document. getElementById ("originale"); CANV_WIDTH = 200; CANV_HEIGHT = 200; // disegna l'originale sul canvas. drawImage (originale, 0, 0); // recupera i dati dell'immagine imgData = con. getImageData (0, 0, 200, 200); // loop through image data for (row = 0; row 255) {r = 255;} if (r 255) {g = 255;} if (g 255) {r = 255;} if (b <0) {b = 0;} if (a> 255) {a = 255;} if (a <0) {a = 0;} // restituisce nuovi valori ai dati imgData. data [indice] = r; imgData. data [indice + 1] = g; imgData. data [indice + 2] = b; imgData. data [index + 3] = a;} // end col per loop} // end row per loop // disegna nuova immagine su canvas con. putImageData (imgData, 0, 0);} // end function
Anche se l'elenco di codici sembra abbastanza lungo, non è molto difficile da seguire:
-
Disegna un'immagine originale.
La tecnica che utilizzerai estrae i dati da un elemento canvas, quindi per modificare un'immagine, devi prima disegnarla su una tela. Puoi usare il normale metodo drawImage ().
-
Estrai i dati dell'immagine.
Il metodo getImageData () ottiene l'immagine visualizzata dalla tela corrente e la colloca in una vasta serie di numeri interi.
-
Crea un loop per gestire le righe.
I dati dell'immagine sono suddivisi in righe e colonne. Ogni riga va da 0 all'altezza della tela, quindi fai un ciclo for per scorrere le righe.
-
Crea un altro ciclo per gestire le colonne.
All'interno di ogni riga ci sono dati sufficienti per passare da 0 alla larghezza della tela, quindi creare un secondo ciclo per il primo.È molto comune utilizzare una coppia di cicli nidificati per scorrere dati bidimensionali come le informazioni sull'immagine.
-
Trova l'indice in imageData per la riga e la colonna corrente.
L'array imageData contiene quattro numeri interi per ogni pixel, quindi dobbiamo fare un po 'di matematica per capire dove si trova il primo numero intero per ogni pixel. La formula più semplice consiste nel moltiplicare il numero di righe per la larghezza della tela, aggiungerlo al numero della colonna e moltiplicare l'intero risultato per quattro.
-
Tirare i valori dei colori corrispondenti dall'indice.
L'indice rappresenta anche il valore rosso del pixel corrente. L'int successivo contiene il valore verde, seguito dal valore blu e infine dal valore alfa.
-
Manipola i valori del colore come vuoi.
Se stai per fare un'app per il bilanciamento del colore, puoi semplicemente aggiungere o sottrarre valori per cambiare il bilanciamento del colore generale. Puoi anche fare un lavoro molto più elaborato se vuoi giocare con la manipolazione delle immagini a livello di pixel.
-
Controlla i confini.
Un valore di pixel non può essere inferiore a 0 o superiore a 255, quindi controllare entrambi i limiti e regolare tutti i valori di pixel entro i limiti di legge.
-
Restituisce i valori manipolati all'array imgData.
È possibile copiare nuovamente i valori nell'array e fare ciò per rendere visibili le modifiche.
-
Disegna i dati dell'immagine sulla tela.
La funzione putImageData () disegna i dati dell'immagine corrente sul canvas come un'immagine ordinaria. La nuova versione dell'immagine rifletterà i cambiamenti.
