在这个 fiddle 上,函数完美地完成了工作,但我需要稍微调整连接。
- 该点击甚至需要是父 div 的 addClass(深色/浅色)(true 或 false)。
- 如果是深色,则添加 Bright 类。
- 如果浅色图像则添加深色图像。
有没有办法让这个函数满足我的需要?
getImageBrightness(this.src,function(brightness) {
document.getElementsByTagName('pre')[0].innerHTML = "Brightness: "+brightness;
});
jsfiddle.net/s7Wx2/
最佳答案
在您的 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;
}
关于javascript - 检测图像是否为暗/亮并将Class(暗/亮)添加到父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38211798/