palette Farbpaletten-Extraktor für Bilder star

Warum man nicht einfach Pixel zählen kann

Der naheliegende Weg, die dominanten Farben eines Fotos zu finden, klingt einfach: Man zählt, wie oft jede exakte Farbe vorkommt, und behält die häufigsten. In der Praxis scheitert das fast sofort. Ein digitales Foto eines blauen Himmels etwa ist kein einheitliches Blau — es besteht aus Tausenden leicht unterschiedlicher Blautöne, die sich Pixel für Pixel durch Sensorrauschen, natürliche Lichtverläufe und JPEG-Kompressionsartefakte verschieben. Zwei benachbarte Himmelspixel könnten rgb(91, 148, 214) und rgb(92, 149, 213) sein: optisch identisch, numerisch verschieden. Als exakte Werte gezählt, ist keiner von beiden „die häufigste Farbe" — jeder taucht vielleicht nur ein- oder zweimal auf, verborgen unter Tausenden fast identischer, aber technisch unterschiedlicher Blautöne. Der naive Ansatz liefert Rauschen statt einer Palette.

Die Lösung besteht darin, nicht mehr exakte Pixelwerte zu zählen, sondern Bereiche (Buckets) ähnlicher Farben. Dieses Tool teilt jeden der Rot-, Grün- und Blaukanäle — die normalerweise von 0 bis 255 reichen — in 8 gleich große Bänder von je 32 Werten, mit Math.floor(value / 32) * 32 auf jedem Kanal. Das verwandelt 16,7 Millionen mögliche RGB-Kombinationen in ein überschaubares Raster von 8 × 8 × 8 = 512 Buckets. Jedes Pixel im verkleinerten Bild landet in genau einem Bucket, je nachdem in welches Band seine Rot-, Grün- und Blauwerte fallen, und es wird eine laufende Zählung geführt — mithilfe eines einfachen Objekts als Hash-Map —, wie viele Pixel in jedem Bucket landen, zusammen mit einer laufenden Summe ihrer tatsächlichen Rot-, Grün- und Blauwerte.

Von Buckets zur Palette

Nachdem jedes Pixel gezählt wurde, werden die Buckets nach Häufigkeit sortiert und die 6 bis 8 am dichtesten besetzten behalten. Die für jeden Bucket angezeigte Farbe ist jedoch nicht einfach die numerische Grenze des Buckets (etwa „224–255 Rot, 128–159 Grün, 0–31 Blau") — das wäre nur eine recht willkürliche Ecke eines 32×32×32-Würfels. Stattdessen berechnet dieses Tool den tatsächlichen Durchschnitt aus Rot, Grün und Blau aller Pixel, die wirklich in diesen Bucket gefallen sind, was der Farbe, die das Auge als repräsentativ für diesen Bildbereich wahrnimmt, wesentlich näherkommt.

Dieser Ansatz des Histogramm-Binning ist eine bewusst einfache Form der Farbquantisierung — die Reduktion einer großen Farbmenge auf eine kleine, repräsentative Menge. Eine anspruchsvollere klassische Alternative ist das Median-Cut-Verfahren, das Paul Heckbert 1980 in seiner Masterarbeit am MIT definierte; es teilt den Farbraum rekursiv entlang seiner breitesten Dimension statt fester Boxen zu verwenden, und ist bis heute die Technik hinter der Reduktion von GIF-Bildern auf eine 256-Farben-Palette. Median-Cut liefert bei komplexen Bildern in der Regel wahrnehmungsgetreuere Paletten, allerdings auf Kosten einer höheren Implementierungskomplexität. Das hier verwendete Histogramm-Binning mit festem Raster ist dagegen einfacher nachzuvollziehen und schnell genug, um sofort im Browser zu laufen — das ist der Kompromiss, den dieses Tool eingeht.

Bevor überhaupt gezählt wird, wird das hochgeladene Bild zunächst mithilfe der HTML5-Canvas-API so verkleinert, dass seine Breite 200 Pixel nicht überschreitet. Das reduziert die Anzahl der zu lesenden und einzusortierenden Pixel um einen großen Faktor und beeinflusst die resultierende Palette kaum, da Farbbereiche breite Farbtonregionen abbilden, keine feinen Details. Der gesamte Prozess — das Zeichnen des Bildes, das Verkleinern, das Auslesen der Pixeldaten mit getImageData() und die Berechnung der Bucket-Durchschnitte — läuft lokal im Speicher des Browsers ab. Das Foto wird nie auf einen Server hochgeladen.