Trovare il colore più comune di un'immagine

Question

Ho un sacco di prodotti su una pagina che ha immagini 200x200. Il mio primo tentativo è stato quello di ottenere i dati per ogni pixel (annidato per ciclo, uno per x, uno per y), quindi convertire rgb in esadecimale, e memorizzarli in un array e quindi ottenere quello più frequente. Questo script deve essere eseguito su 96 elementi per pagina alla volta.

Attualmente, crea una tela e inserisce l'immagine del prodotto in quella tela e quindi esegue le operazioni sopra.

Esiste qualche tipo di algoritmo di calcolo della media che renderebbe questo più veloce?

Answer 1

Sì!

Lokesh Dhakar ha creato uno script chiamato "color thief" che calcola il colore dominante di un'immagine. Usa l'algoritmo di quantizzazione del taglio mediano modificato (MCCQ) per raggruppare rapidamente i colori e determinare il colore dominante (o anche l'intera tavolozza dei colori).

C'è una demo qui: http://lokeshdhakar.com/projects/color-thief/ e lo script è disponibile su GitHub qui: https://github.com/lokesh/color-thief

Answer 2

So che può sembrare facile da usare biblioteca e tutti, ma ho trovato una soluzione molto più semplice che serve praticamente lo scopo. Quando si applica un filtro sfocatura, ciò che fa è la media delle intensità dei pixel. Quindi, se si applica una sfocatura all'immagine con un valore piuttosto elevato di pixel come

filter:blur(30px); 

o

filter:blur(50px); 

o qualsiasi cosa che si adatta, è out in media l'intera immagine e fornisce un colore di sfondo solido che è la maggior parte del tempo il colore prominente dall'immagine.

È molto più semplice da fare e dovrebbe funzionare quasi sempre. Prova a armeggiare con la quantità di sfocatura.

Ricordarsi inoltre di impostare l'overflow-y da nascondere perché l'alta sfocatura provoca il riempimento del bianco all'esterno dell'immagine. nascondere l'overflow lo risolverà.

Spero che questo aiuti :)