2013-03-07 21 views
5

200x200 boyutundaki resimleri içeren bir sayfada ürünlerim var. İlk çalışmamda her bir piksel için veri (döngü için yuvalanmış, biri x için, y için bir tane) almak, sonra rgb'yi hex'e dönüştürmek ve bunları bir dizide saklamak ve en sık olanı almaktı. Bu komut dosyasının bir seferde sayfa başına 96 öğe üzerinde çalışması gerekiyor.Görüntünün en yaygın renklerini bulma

Halihazırda bir kanvas oluşturur ve ürün resmini bu tuvale koyar ve ardından yukarıdaki işlemleri gerçekleştirir.

Bunu daha hızlı hale getirecek bir tür ortalama algoritma var mı?

+1

Geçerli algoritmanız nedir? – mpm

cevap

11

Evet!

Lokesh Dhakar, görüntünün baskın rengini hesaplayan "renk hırsızı" adlı bir komut dosyası oluşturdu. Renkleri hızla kümelemek ve baskın rengi (hatta tüm renk paletini) belirlemek için değiştirilmiş medyan kesim niceleme algoritmasını (MCCQ) kullanır.

Orada burada bir demo: http://lokeshdhakar.com/projects/color-thief/ ve senaryo burada github geçerli: Ben kütüphane ve tüm kullanımı kolay geliyor biliyorum https://github.com/lokesh/color-thief

+0

Dahili olarak "canvas.getImageData()" işlevini kullanır, böylece "lekeli tuval" güvenlik uyarısı sorunuyla karşılaşabilirsiniz. – tigrou

-1

, ama hemen hemen amaca hizmet çok daha basit bir çözüm buldum. Bulanıklık filtresini uyguladığınızda, piksel yoğunluğunun ortalaması alınır. Yani

filter:blur(30px); 

veya

filter:blur(50px); 

veya uygun bir şey, bu ortalama çıkışları tüm görüntü gibi oldukça yüksek piksel değeri ile görüntüye bir bulanıklık uygulamak ve sağlam bir arka plan rengi ile sizi sağlıyorsa hangi çoğu zaman görüntüden öne çıkan renktir.

Bunu yapmak çok daha kolay ve hemen hemen her zaman çalışmalı. Sadece bulanıklık miktarı ile tinkering deneyin.

Ayrıca, yüksek bulanıklık nedeniyle resmin dışında beyaz dolgu oluşturduğundan, gizlenecek yitimi de unutmayın. taşmayı saklamak bunu düzeltecektir.

Yardım bu yardımcı olur :)

İlgili konular