palette Kleurenpalet Uit Afbeelding Halen star

Waarom u niet gewoon pixels kunt tellen

De voor de hand liggende manier om de dominante kleuren van een foto te vinden klinkt simpel: tel hoeveel pixels elke exacte kleur hebben, en behoud de kleuren die het vaakst voorkomen. In de praktijk faalt dit bijna onmiddellijk. Een digitale foto van een blauwe lucht is bijvoorbeeld niet één vlak blauw — het zijn duizenden subtiel verschillende blauwtinten, die per pixel verschuiven door sensorruis, natuurlijke lichtovergangen en JPEG-compressieartefacten. Twee aangrenzende luchtpixels kunnen rgb(91, 148, 214) en rgb(92, 149, 213) zijn: visueel identiek, numeriek verschillend. Geteld als exacte waarden is geen van beide "de meest voorkomende kleur" — elk komt misschien maar één of twee keer voor, verscholen tussen duizenden bijna-identieke maar technisch verschillende blauwtinten. De naïeve aanpak levert ruis op, geen palet.

De oplossing is te stoppen met het tellen van exacte pixelwaarden en in plaats daarvan emmers (buckets) van vergelijkbare kleuren te tellen. Deze tool verdeelt elk van de rode, groene en blauwe kanalen — normaal variërend van 0 tot 255 — in 8 gelijke banden van 32 waarden, met Math.floor(waarde / 32) * 32 op elk kanaal. Dat verandert 16,7 miljoen mogelijke RGB-combinaties in een behapbaar raster van 8 × 8 × 8 = 512 emmers. Elke pixel in de verkleinde afbeelding komt terecht in precies één emmer, gebaseerd op in welke band zijn rode, groene en blauwe waarden vallen, en er wordt een lopende telling bijgehouden — met een gewoon object als hashmap — van hoeveel pixels in elke emmer terechtkomen, plus een lopende som van hun werkelijke rode, groene en blauwe waarden.

Van emmers naar een palet

Zodra elke pixel is geteld, worden de emmers gesorteerd op populatie en worden de 6 tot 8 meest gevulde behouden. Maar de kleur die voor elke emmer wordt getoond, is niet simpelweg de numerieke grens van de emmer (bijvoorbeeld "224-255 rood, 128-159 groen, 0-31 blauw") — dat zou slechts een enigszins willekeurige hoek van een kubus van 32×32×32 zijn. In plaats daarvan berekent deze tool de werkelijke gemiddelde rode, groene en blauwe waarde van elke pixel die daadwerkelijk in die emmer terechtkwam, wat veel dichter bij ligt bij wat het oog waarneemt als de representatieve kleur van dat deel van de afbeelding.

Deze histogram-binning-aanpak is een bewust eenvoudige vorm van kleurkwantisatie — het terugbrengen van een grote verzameling kleuren tot een kleine representatieve verzameling. Een geavanceerder klassiek alternatief is median-cut, gedefinieerd door Paul Heckbert in zijn masterscriptie uit 1980 aan het MIT, dat de kleurruimte recursief splitst langs zijn breedste dimensie in plaats van vaste-groottevakken te gebruiken; het is nog steeds de techniek achter het terugbrengen van GIF-afbeeldingen naar een palet van 256 kleuren. Median-cut produceert over het algemeen perceptueel nauwkeurigere paletten voor complexe afbeeldingen, ten koste van meer implementatiecomplexiteit. Histogram-binning met een vast raster, hier gebruikt, is eenvoudiger te doorgronden en snel genoeg om direct in de browser te draaien — dat is de afweging die deze tool maakt.

Voordat er geteld wordt, wordt de geüploade afbeelding eerst verkleind zodat de breedte niet meer dan 200 pixels bedraagt, met behulp van de HTML5 canvas-API. Dit vermindert het aantal te lezen en in te delen pixels met een grote factor, en heeft nauwelijks invloed op het resulterende palet, aangezien kleuremmers brede kleurregio's volgen, geen fijne details. Het hele proces — de afbeelding tekenen, verkleinen, pixeldata lezen met getImageData(), en emmergemiddeldes berekenen — gebeurt lokaal in het geheugen van de browser. De foto wordt nooit naar een server geüpload.