检测图像是否暗/浅并向类别添加类别（暗/光）

在此小提琴上，这些功能完美地完成了这项工作，但我需要稍微调整交点。检测图像是否暗/浅并向类别添加类别（暗/光）

点击甚至需要是父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

检测图像是否暗/浅并向类别添加类别（暗/光）

回答

相关问题