palette Görselden Renk Paleti Çıkarıcı star

Neden Sadece Piksel Saymak İşe Yaramaz

Bir fotoğrafın baskın renklerini bulmanın en bariz yolu basit görünür: her tam rengin kaç pikselde göründüğünü say, en sık görüneni tut. Pratikte bu neredeyse anında başarısız olur. Örneğin mavi bir gökyüzü fotoğrafı tek düz bir mavi değildir — sensör gürültüsü, doğal ışık geçişleri ve JPEG sıkıştırma bozulmaları yüzünden piksel piksel hafifçe değişen binlerce farklı mavi tondan oluşur. Bitişik iki gökyüzü pikseli rgb(91, 148, 214) ve rgb(92, 149, 213) olabilir: göze tamamen aynı görünür ama sayısal olarak farklıdır. Tam değer olarak sayıldığında ikisinden hiçbiri "en sık geçen renk" olamaz — her biri tüm görselde belki sadece bir veya iki kez geçer, aralarında hemen hemen aynı ama teknik olarak farklı binlerce başka mavi tonun arasında kaybolur. Naif yaklaşım bir palet değil, gürültü döndürür.

Çözüm, tam piksel değerlerini saymayı bırakıp benzer renklerin oluşturduğu kovaları (bucket) saymaktır. Bu araç, normalde 0-255 arasında değişen kırmızı, yeşil ve mavi kanalların her birini, 32'şer değerlik 8 eşit banda ayırır; her kanala Math.floor(deger / 32) * 32 uygulanır. Bu, 16,7 milyon olası RGB kombinasyonunu 8 × 8 × 8 = 512 kovadan oluşan yönetilebilir bir ızgaraya indirger. Yeniden boyutlandırılmış görseldeki her piksel, kırmızı, yeşil ve mavi değerlerinin hangi banda düştüğüne göre tam olarak bir kovaya yerleştirilir; bir JavaScript nesnesiyle her kovaya kaç pikselin düştüğü ve o piksellerin gerçek kırmızı, yeşil, mavi değerlerinin toplamı canlı olarak tutulur.

Kovalardan Palete

Her piksel sayıldıktan sonra kovalar doluluğa göre sıralanır ve en dolu 6 ila 8 kova tutulur. Ancak her kova için gösterilen renk, kovanın sayısal sınırı değildir (örneğin "224-255 kırmızı, 128-159 yeşil, 0-31 mavi") — bu, 32×32×32'lik bir kübün oldukça keyfi bir köşesi olurdu. Bunun yerine bu araç, o kovaya gerçekten düşen her pikselin gerçek kırmızı, yeşil ve mavi ortalamasını hesaplar; bu, gözün görselin o bölgesini temsil eden renk olarak algıladığı şeye çok daha yakındır.

Bu histogram-binning (histogram kovalama) yaklaşımı, kasıtlı olarak basit bir renk niceleme (color quantization) biçimidir — büyük bir renk kümesini küçük, temsil edici bir kümeye indirger. Daha sofistike klasik bir alternatif, Paul Heckbert'in 1980'de MIT'deki yüksek lisans tezinde tanımladığı medyan kesme (median-cut) yöntemidir; bu, sabit boyutlu kutular kullanmak yerine renk uzayını en geniş boyutu boyunca özyinelemeli olarak böler ve hâlâ GIF görsellerinin 256 renklik palete indirgenmesinin arkasındaki tekniktir. Medyan kesme, dengesiz renk dağılımına sahip karmaşık görseller için genellikle daha algısal doğru paletler üretir, ancak bunun bedeli daha fazla uygulama karmaşıklığıdır. Burada kullanılan sabit ızgaralı histogram kovalama ise akıl yürütmesi daha basittir ve yeniden boyutlandırılmış bir görsel üzerinde tarayıcıda anında çalışacak kadar hızlıdır — bu aracın yaptığı ödünleşim budur.

Bu sayım işlemi başlamadan önce, yüklenen görsel HTML5 canvas API kullanılarak önce genişliği 200 pikseli aşmayacak şekilde küçültülür. Bu adım iki nedenle önemlidir: okunup kovalanması gereken piksel sayısını büyük bir katsayıyla azaltır — 4000px genişliğinde bir fotoğraf, 200px genişliğindekinden 300 kattan fazla piksele sahiptir — ve sonuç paleti üzerinde neredeyse hiç etkisi yoktur, çünkü renk kovaları ince ayrıntı değil, geniş ton bölgeleriyle ilgilidir. Görseli çizmekten yeniden boyutlandırmaya, getImageData() ile piksel verisini okumaya ve kova ortalamalarını hesaplamaya kadar tüm süreç yerel olarak tarayıcının belleğinde gerçekleşir. Fotoğraf hiçbir sunucuya yüklenmez.