Resim Koyu/Işık Algılama İstemci Taraflı Komut Dosyası

Question

İstemcide karalanmış bir komut dosyası kullanarak görüntüdeki koyuluğu/açıklığı algılamak için bir komut dosyası (html dahil) olup olmadığını bilen var mı?

Temel olarak arka planda kullanılan görüntü tipini (koyu/açık) algılayabilmeyi ve CSS/HTML/Jquery/JS'nin sayfayı, ışığın karanlık olduğu bir değişkeni temel alarak uyarlamasını istiyorum. yanlış).

Sunucu taraflı komut dosyasının olduğunu biliyorum, ancak bu özel geliştirme için kullanamazsınız.

Şimdiden teşekkürler.

Answer 1

gri skala ve piksel ortalama dönüş, bu nedenle son değer 0 (koyu) ve 255 (parlak)

function getImageLightness(imageSrc,callback) { 
    var img = document.createElement("img"); 
    img.src = imageSrc; 
    img.style.display = "none"; 
    document.body.appendChild(img); 

    var colorSum = 0; 

    img.onload = function() { 
     // create canvas 
     var canvas = document.createElement("canvas"); 
     canvas.width = this.width; 
     canvas.height = this.height; 

     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(this,0,0); 

     var imageData = ctx.getImageData(0,0,canvas.width,canvas.height); 
     var data = imageData.data; 
     var r,g,b,avg; 

     for(var x = 0, len = data.length; x < len; x+=4) { 
      r = data[x]; 
      g = data[x+1]; 
      b = data[x+2]; 

      avg = Math.floor((r+g+b)/3); 
      colorSum += avg; 
     } 

     var brightness = Math.floor(colorSum/(this.width*this.height)); 
     callback(brightness); 
    } 
} 

Kullanım arasında olacaktır, her bir renk dönüştürür Bu fonksiyon:

getImageLightness("image.jpg",function(brightness){ 
    console.log(brightness); 
}); 

JSFiddle:

http://jsfiddle.net/s7Wx2/

Answer 2

Benim cevabım Yeniden kullanılmamış kodun çoğunu @ lostsource'un cevabı, ancak karanlık ve aydınlık görüntüleri ayırt etmeye çalışmak için farklı bir yöntem kullanır.

İlk olarak, RGB kanallarının toplamının ortalama değerinin sonucunun ne olduğunu analiz etmeliyiz (kısaca). İnsanlar için anlamsız. Pembe yeşilden daha mı parlak? I.e, neden (0, 255, 0) (255, 0, 255) 'den daha düşük bir parlaklık değeri vermesini istersiniz? Ayrıca, orta yeşili (128, 255, 0) gibi bir orta gri (128, 128, 128) mi? Bunu dikkate almak için, HSV renk uzayında olduğu gibi sadece kanalın renk parlaklığı ile ilgileniyorum. Bu, belirli bir RGB üçlüsünün maksimum değeridir.

dinlenme sezgiselleri olduğunu. Bir noktada i için max_rgb = max(RGB_i) edelim. max_rgb (a 8bpp görüntü varsayarak) 128 düşükse, o zaman aksi takdirde hafiftir, karanlık yeni bir nokta i bulundu. her noktada i için yapıyorum, biz hafif A puan ve karanlık B puan almak. (A - B)/(A + B) >= 0 ise görüntü ışıktır diyoruz. Her nokta karanlıksa, -1 değeri elde edersiniz, aksi halde her nokta hafifse +1 alırsınız. Önceki formülü ayarlayabilir, böylece görüntüleri karanlıkta kabul edebilirsiniz. kodunda ben fuzzy olarak değişken adında, ancak Görüntü İşleme fuzzy alanda yok adalet yok. Yani, görüntü (A - B)/(A + B) + fuzzy >= 0 ise ışık olduğunu söylüyoruz.

Kod http://jsfiddle.net/s7Wx2/7/ adresinde, çok basittir, notasyonlarımın sizi korkutmasına izin vermeyin.

Answer 3

Arka Plan Denetimi adlı bir komut dosyası, görüntüdeki koyuluğu/açıklığı algılayabilir. Bunu yapmak için JavaScript kullanır.

http://www.kennethcachia.com/background-check/

Bunun içindeki algılama bu tip bir kaydırıcı yapmak isteyen herkes yardımcı olur umarım: Burada

buna bir bağlantıdır.