javascript - 检测图像是否为暗/亮并将Class(暗/亮)添加到父级

Question

在这个 fiddle 上，函数完美地完成了工作，但我需要稍微调整连接。

• 该点击甚至需要是父 div 的 addClass(深色/浅色)(true 或 false)。
• 如果是深色，则添加 Bright 类。
• 如果浅色图像则添加深色图像。

有没有办法让这个函数满足我的需要？

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

jsfiddle.net/s7Wx2/

Answer 1

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