檢測圖像是否暗/淺並向類別添加類別（暗/光）

在此小提琴上，這些功能完美地完成了這項工作，但我需要稍微調整交點。檢測圖像是否暗/淺並向類別添加類別（暗/光）

點擊甚至需要是父div的addClass（暗/淡）（true爲false）。
如果dark addClass Bright。
如果光圖像addClass黑暗。

有沒有辦法讓這個功能做我需要的？

getImageBrightness(this.src,function(brightness) { 
      document.getElementsByTagName('pre')[0].innerHTML = "Brightness: "+brightness; 
     });

jsfiddle.net/s7Wx2/

來源

2016-07-05 user3699998

因此，如果增加一個，並添加基於亮度變量的值的類。 – epascarello

@epascarello謝謝，我想是的，我可以嘗試但不知道我能做到。 – user3699998

你認爲什麼很複雜？把它分解成兩顆牛排。首先使用一個基本的'if/else'來獲取要添加的類名。之後，它將元素名稱添加到元素 – epascarello

Working Fiddle Here.

在你的HTML，我只加id您img。
我玩了一點你的純粹的javascript getImageBrightness ...但沒有那麼多。

我用「127.5」作爲黑暗和光線之間的中間線。
我建議你評估它...因爲人眼不像腳本那樣數學。
;）

下面是腳本：

var thisImg; 

function getImageBrightness(image,callback) { 
    var thisImgID = image.attr("id"); 

    var img = document.createElement("img"); 
    img.src = image.attr("src"); 

    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(thisImgID, brightness); 
    } 
} 

$("img").on("click", function(){ 
    thisImg = $(this) 

    getImageBrightness($(this),function(thisImgID, brightness) {  
     document.getElementsByTagName('pre')[0].innerHTML = "Brightness: "+brightness+"<br><br>- Red border means class added -> dark,<br>- yellow border mean class added -> light"; 

     if(brightness<127.5){ 
      $("#"+thisImgID).addClass("dark"); 
     }else{ 
      $("#"+thisImgID).addClass("light"); 
     } 
    }); 
});

CSS：

.dark{ 
    border:3px solid red; 
} 
.light{ 
    border:3px solid yellow; 
}

來源

2016-07-05 22:39:50

檢測圖像是否暗/淺並向類別添加類別（暗/光）

回答

相關問題