palette Extrator de Paleta de Cores de Imagem star

Por Que Não Basta Contar Píxeis

A forma mais óbvia de encontrar as cores dominantes de uma fotografia parece simples: contar quantos píxeis têm exatamente cada cor e manter as que aparecem mais vezes. Na prática, isto falha quase de imediato. Uma fotografia digital de um céu azul, por exemplo, não é um único azul uniforme — são milhares de tons de azul subtilmente diferentes, que variam píxel a píxel devido ao ruído do sensor, a gradientes de luz natural e a artefactos de compressão JPEG. Dois píxeis de céu adjacentes podem ser rgb(91, 148, 214) e rgb(92, 149, 213): visualmente idênticos, numericamente distintos. Contados como valores exatos, nenhum deles é "a cor mais comum" — cada um pode aparecer apenas uma ou duas vezes, perdido entre milhares de azuis quase idênticos mas tecnicamente diferentes. A abordagem ingénua devolve ruído, não uma paleta.

A solução é deixar de contar valores exatos de píxel e passar a contar grupos (buckets) de cores semelhantes. Esta ferramenta divide cada um dos canais vermelho, verde e azul — que normalmente vão de 0 a 255 — em 8 bandas iguais de 32 valores, usando Math.floor(valor / 32) * 32 em cada canal. Isso transforma 16,7 milhões de combinações RGB possíveis numa grelha manejável de 8 × 8 × 8 = 512 grupos. Cada píxel da imagem redimensionada cai exatamente num grupo, consoante a banda em que os seus valores de vermelho, verde e azul se encaixam, e mantém-se uma contagem contínua — usando um objeto simples como mapa hash — de quantos píxeis caem em cada grupo, além de uma soma contínua dos seus valores reais de vermelho, verde e azul.

Dos Grupos à Paleta

Depois de todos os píxeis contados, os grupos são ordenados por população e mantêm-se os 6 a 8 mais populosos. Mas a cor apresentada para cada grupo não é simplesmente o limite numérico do grupo (digamos, "224-255 vermelho, 128-159 verde, 0-31 azul") — isso seria apenas um canto um tanto arbitrário de um cubo de 32×32×32. Em vez disso, esta ferramenta calcula a verdadeira média de vermelho, verde e azul de todos os píxeis que efetivamente caíram nesse grupo, o que fica muito mais próximo do que o olho percebe como a cor representativa daquela região da imagem.

Esta abordagem de agrupamento por histograma é uma forma deliberadamente simples de quantização de cor — reduzir um conjunto grande de cores a um conjunto pequeno e representativo. Uma alternativa clássica mais sofisticada é o median-cut, definido por Paul Heckbert na sua tese de mestrado de 1980 no MIT, que divide recursivamente o espaço de cor ao longo da sua dimensão mais larga em vez de usar caixas de tamanho fixo; continua a ser a técnica por trás da redução de imagens GIF a uma paleta de 256 cores. O median-cut produz geralmente paletas percetivamente mais precisas para imagens complexas, ao custo de maior complexidade de implementação. O agrupamento por histograma de grelha fixa, usado aqui, é mais simples de compreender e suficientemente rápido para correr instantaneamente no navegador — é essa a troca que esta ferramenta faz.

Antes de qualquer contagem, a imagem carregada é primeiro reduzida para que a sua largura não exceda 200 píxeis, usando a API de canvas do HTML5. Isto diminui drasticamente o número de píxeis que é preciso ler e agrupar, e afeta muito pouco a paleta resultante, uma vez que os grupos de cor captam regiões amplas de matiz, não detalhes finos. Todo o processo — desenhar a imagem, redimensioná-la, ler os dados de píxel com getImageData() e calcular as médias de cada grupo — acontece localmente na memória do navegador. A fotografia nunca é enviada para nenhum servidor.