palette Estrattore di Palette Colori da Immagine star

Perché Non Basta Contare i Pixel

Il modo più ovvio per trovare i colori dominanti di una foto sembra semplice: contare quanti pixel hanno esattamente ciascun colore e tenere quelli che compaiono più spesso. In pratica questo approccio fallisce quasi subito. Una foto digitale di un cielo blu, ad esempio, non è un unico blu uniforme — è composta da migliaia di sfumature di blu leggermente diverse, che cambiano pixel per pixel a causa del rumore del sensore, dei gradienti di luce naturale e degli artefatti di compressione JPEG. Due pixel di cielo adiacenti potrebbero essere rgb(91, 148, 214) e rgb(92, 149, 213): visivamente identici, numericamente distinti. Contati come valori esatti, nessuno dei due è "il colore più comune" — ciascuno potrebbe comparire solo una o due volte, sepolto tra migliaia di altri blu quasi identici ma tecnicamente diversi. L'approccio ingenuo restituisce rumore, non una palette.

La soluzione è smettere di contare i valori esatti dei pixel e iniziare a contare gruppi (bucket) di colori simili. Questo strumento divide ciascuno dei canali rosso, verde e blu — normalmente compresi tra 0 e 255 — in 8 bande uguali di 32 valori, applicando Math.floor(valore / 32) * 32 a ogni canale. Questo trasforma 16,7 milioni di combinazioni RGB possibili in una griglia gestibile di 8 × 8 × 8 = 512 bucket. Ogni pixel dell'immagine ridimensionata finisce esattamente in un bucket a seconda della banda in cui cadono i suoi valori di rosso, verde e blu, e viene mantenuto un conteggio continuo — usando un semplice oggetto come mappa hash — di quanti pixel finiscono in ciascuno, insieme a una somma continua dei loro valori reali di rosso, verde e blu.

Dai Bucket alla Palette

Una volta contati tutti i pixel, i bucket vengono ordinati per popolazione e si conservano i 6-8 più popolati. Ma il colore mostrato per ogni bucket non è semplicemente il suo limite numerico (ad esempio "224-255 rosso, 128-159 verde, 0-31 blu") — sarebbe solo un angolo piuttosto arbitrario di un cubo 32×32×32. Invece, questo strumento calcola la media reale di rosso, verde e blu di ogni pixel che è effettivamente caduto in quel bucket, il che è molto più vicino a ciò che l'occhio percepisce come il colore rappresentativo di quella regione dell'immagine.

Questo approccio di binning tramite istogramma è una forma deliberatamente semplice di quantizzazione del colore — la riduzione di un ampio insieme di colori a un piccolo insieme rappresentativo. Un'alternativa classica più sofisticata è il median-cut, definito da Paul Heckbert nella sua tesi di laurea magistrale del 1980 al MIT, che divide ricorsivamente lo spazio colore lungo la sua dimensione più ampia invece di usare riquadri di dimensione fissa; è ancora la tecnica alla base della riduzione delle immagini GIF a una palette di 256 colori. Il median-cut produce generalmente palette percettivamente più accurate per immagini complesse, a costo di una maggiore complessità di implementazione. Il binning a griglia fissa tramite istogramma, usato qui, è più semplice da comprendere ed è abbastanza veloce da essere eseguito istantaneamente nel browser, ed è questo il compromesso scelto da questo strumento.

Prima che inizi qualsiasi conteggio, l'immagine caricata viene prima ridotta in modo che la sua larghezza non superi i 200 pixel, usando l'API canvas di HTML5. Questo riduce drasticamente i pixel da leggere e raggruppare, e influisce a malapena sulla palette risultante, poiché i bucket di colore tracciano ampie regioni di tonalità, non dettagli fini. L'intero processo — disegnare l'immagine, ridimensionarla, leggere i dati dei pixel con getImageData() e calcolare le medie dei bucket — avviene localmente nella memoria del browser. La foto non viene mai caricata su alcun server.