html5-canvas
Manipolazione pixel con "getImageData" e "putImageData"

Introduzione a "context.getImageData"

Html5 Canvas ti dà la possibilità di recuperare e cambiare il colore di qualsiasi pixel sulla tela.

Puoi utilizzare la manipolazione dei pixel di Canvas per:

• Crea un selettore di colori per un'immagine o seleziona un colore su una ruota dei colori.
• Crea filtri immagine complessi come sfocatura e rilevamento dei bordi.
• Ricolora qualsiasi parte di un'immagine a livello di pixel (se utilizzi HSL puoi anche ricolorare un'immagine pur conservando l'illuminazione e la saturazione importanti in modo che il risultato non assomigli a qualcuno che schiaffeggia l'immagine). Nota: Canvas ora dispone di Blend Compositing che può anche ricolorare un'immagine in alcuni casi.
• "Elimina" lo sfondo attorno a una persona / elemento in un'immagine,
• Crea uno strumento paint-bucket per rilevare e Floodfill parte di un'immagine (ad esempio, cambia il colore di un petalo selezionato dall'utente da verde a giallo).
• Esaminare un'immagine per contenuto (ad esempio riconoscimento facciale).

Problemi comuni:

• Per motivi di sicurezza, getImageData è disabilitato se hai disegnato un'immagine proveniente da un dominio diverso dalla stessa pagina web.
• getImageData è un metodo relativamente costoso perché crea una grande matrice di pixel-data e perché non utilizza la GPU per supportare i suoi sforzi. Nota: Canvas ora ha un mix compositing che può eseguire la stessa manipolazione dei pixel getImageData da getImageData .
• Per le immagini .png, getImageData potrebbe non riportare esattamente gli stessi colori del file .png originale perché al browser è consentito eseguire la correzione gamma e la premoltiplicazione alfa quando si disegnano immagini sul quadro.

Ottenere colori pixel

Usa getImageData per recuperare i colori dei pixel per tutto o parte del tuo contenuto su tela.

Il metodo getImageData restituisce un oggetto imageData

L'oggetto imageData ha una proprietà .data che contiene le informazioni sul colore dei pixel.

La proprietà data è un Uint8ClampedArray contenente i dati di colore Rosso, Verde, Blu e Alfa (opacità) per tutti i pixel richiesti.

// determine which pixels to fetch (this fetches all pixels on the canvas)
var x=0;
var y=0;
var width=canvas.width;
var height=canvas.height;

// Fetch the imageData object 
var imageData = context.getImageData(x,y,width,height);

// Pull the pixel color data array from the imageData object
var pixelDataArray = imageData.data;

Puoi ottenere la posizione di qualsiasi [x, y] pixel all'interno di data array di data come questo:

// the data[] array position for pixel [x,y]
var n = y * canvas.width + x;

E poi puoi recuperare i valori di rosso, verde, blu e alfa di quel pixel come questo:

// the RGBA info for pixel [x,y]
var red=data[n];
var green=data[n+1];
var blue=data[n+2];
var alpha=data[n+3];

Un'illustrazione che mostra come è strutturato l'array di dati del pixel

context.getImageData è illustrato di seguito per un piccolo canvas di dimensioni 2x3 pixel: