palette Extracteur de Palette de Couleurs d'Image star

Pourquoi on ne peut pas simplement compter les pixels

La façon évidente de trouver les couleurs dominantes d'une photo semble simple : compter combien de pixels ont exactement chaque couleur, et garder celles qui apparaissent le plus souvent. En pratique, cela échoue presque immédiatement. Une photo numérique d'un ciel bleu, par exemple, n'est pas un bleu uniforme — ce sont des milliers de bleus subtilement différents, changeant pixel par pixel à cause du bruit du capteur, des dégradés de lumière naturelle et des artefacts de compression JPEG. Deux pixels de ciel adjacents pourraient être rgb(91, 148, 214) et rgb(92, 149, 213) : visuellement identiques, numériquement distincts. Comptés comme des valeurs exactes, aucun des deux n'est « la couleur la plus fréquente » — chacun pourrait n'apparaître qu'une ou deux fois, noyé parmi des milliers d'autres bleus presque identiques mais techniquement différents. L'approche naïve renvoie du bruit, pas une palette.

La solution consiste à arrêter de compter les valeurs exactes de pixels et à commencer à compter des compartiments (buckets) de couleurs similaires. Cet outil divise chacun des canaux rouge, vert et bleu — normalement compris entre 0 et 255 — en 8 bandes égales de 32 valeurs, en appliquant Math.floor(valeur / 32) * 32 à chaque canal. Cela transforme 16,7 millions de combinaisons RVB possibles en une grille gérable de 8 × 8 × 8 = 512 compartiments. Chaque pixel de l'image redimensionnée tombe exactement dans un compartiment selon la bande dans laquelle se situent ses valeurs de rouge, vert et bleu, et un décompte continu est tenu — à l'aide d'un simple objet servant de table de hachage — du nombre de pixels tombant dans chacun, ainsi qu'une somme continue de leurs valeurs réelles de rouge, vert et bleu.

Des compartiments à la palette

Une fois tous les pixels comptés, les compartiments sont triés par population et les 6 à 8 plus peuplés sont conservés. Mais la couleur affichée pour chaque compartiment n'est pas simplement sa limite numérique (disons « 224-255 rouge, 128-159 vert, 0-31 bleu ») — ce ne serait qu'un coin plutôt arbitraire d'un cube de 32×32×32. Cet outil calcule plutôt la moyenne réelle de rouge, vert et bleu de chaque pixel réellement tombé dans ce compartiment, ce qui se rapproche beaucoup plus de ce que l'œil perçoit comme la couleur représentative de cette région de l'image.

Cette approche par regroupement en histogramme est une forme délibérément simple de quantification des couleurs — réduire un grand ensemble de couleurs à un petit ensemble représentatif. Une alternative classique plus sophistiquée est le median-cut, défini par Paul Heckbert dans son mémoire de master de 1980 au MIT, qui divise récursivement l'espace colorimétrique le long de sa dimension la plus large plutôt que d'utiliser des boîtes de taille fixe ; c'est toujours la technique derrière la réduction des images GIF à une palette de 256 couleurs. Le median-cut produit généralement des palettes perceptuellement plus précises pour les images complexes, au prix d'une plus grande complexité d'implémentation. Le regroupement par histogramme à grille fixe, utilisé ici, est plus simple à raisonner et assez rapide pour s'exécuter instantanément dans le navigateur — c'est le compromis que fait cet outil.

Avant que tout comptage ne commence, l'image téléversée est d'abord réduite pour que sa largeur ne dépasse pas 200 pixels, à l'aide de l'API canvas de HTML5. Cela réduit considérablement le nombre de pixels à lire et à répartir, et affecte à peine la palette résultante, puisque les compartiments de couleur suivent de larges régions de teinte, pas des détails fins. L'ensemble du processus — dessiner l'image, la redimensionner, lire les données de pixels avec getImageData(), et calculer les moyennes des compartiments — se déroule localement dans la mémoire du navigateur. La photo n'est jamais téléversée vers un serveur.