圖像暗/光檢測客戶端雙面腳本

Question

有誰知道是否有腳本可用於檢測圖像（包括html）中的黑暗/亮度，使用客戶端腳本？

我基本上想要能夠檢測背景中使用的圖像類型（黑暗/光線），並讓CSS/HTML/Jquery/JS根據變暗來調整頁面假）。

我知道有服務器端腳本可用，但不能用於此特定的開發。

在此先感謝。

Answer 1

該函數將每個顏色轉換爲灰度和返回的所有像素的平均，所以最終值將是0（最暗）和255（最亮）

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); 
    } 
} 

用法之間：

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

的jsfiddle：

http://jsfiddle.net/s7Wx2/

Answer 2

我的答案再利用@ lostsource的答案中的大部分代碼，但它使用不同的方法來嘗試區分黑暗和光照圖像。

首先，我們需要（簡要地）分析RGB通道總和的平均值的結果。對於人類來說，這是沒有意義的。粉紅色比綠色亮嗎？也就是說，你爲什麼要（0,255,0）給出比（255,0,255）更低的亮度值？此外，中間灰色（128,128,128）明亮就像中間綠色（128,255,0）？考慮到這一點，我只處理通道的色彩亮度，就像在HSV色彩空間中所做的那樣。這只是給定RGB三元組的最大值。

其餘的是啓發式。讓max_rgb = max(RGB_i)某些點i。如果max_rgb低於128（假設8bpp圖像），那麼我們發現一個新點i是黑暗的，否則它是輕的。對於每個點i這樣做，我們得到A點亮，而B點變暗。如果(A - B)/(A + B) >= 0那麼我們說圖像很輕。請注意，如果每個點都很暗，那麼您會得到-1的值，相反如果每個點都很亮，您會得到+1。之前的公式可以調整，以便您可以接受幾乎黑暗的圖像。在代碼中，我將該變量命名爲fuzzy，但它對圖像處理中的fuzzy字段沒有任何公正性。所以，我們說如果(A - B)/(A + B) + fuzzy >= 0的圖像很亮。

該代碼是在http://jsfiddle.net/s7Wx2/7/，這是非常簡單的，不要讓我的符號嚇唬你。

Answer 3

一個名爲Background Check的腳本可以檢測圖像中的黑暗/亮度。它使用JavaScript來做到這一點。

下面是它的鏈接：

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

我希望幫助任何人想要做一個滑蓋內就這種類型的檢測。