javascript - Detect if image is darklight and addClass (darklight) to parent - Stack Overflow

admin管理员组

文章数量:1394977

On this Fiddle, the functions does the job perfectly, but I need to tweak the junction slightly.

• the click even needs to be a addClass (dark/light)(true of false) to the parent div.
• If dark addClass Bright.
• If light image addClass dark.

Is there a way to make this function doing what I need?

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

jsfiddle/s7Wx2/

On this Fiddle, the functions does the job perfectly, but I need to tweak the junction slightly.

• the click even needs to be a addClass (dark/light)(true of false) to the parent div.
• If dark addClass Bright.
• If light image addClass dark.

Is there a way to make this function doing what I need?

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

jsfiddle/s7Wx2/

• javascript
• jquery
• html

Share Improve this question Follow edited Jul 5, 2016 at 20:13 DDfrontenderLover asked Jul 5, 2016 at 20:03 DDfrontenderLoverDDfrontenderLover 48011 gold badge77 silver badges2323 bronze badges 10

• 2 So add an if and add the class based on the value of the brightness variable. – epascarello Commented Jul 5, 2016 at 20:06
• @epascarello thanks, I thought so, I can try but not sure I can do it. – DDfrontenderLover Commented Jul 5, 2016 at 20:13
• What do you think is plicated? Break it up into twi steos. First use a basic if/else to get the classname to add. After that, it is adding the classname to the element – epascarello Commented Jul 5, 2016 at 20:15
• You need to determine what you consider the line between dark and light. It may be 255/2 => 127.5... Which is the straith half.... OR less... Depending on your judgement. Then pare. – Louys Patrice Bessette Commented Jul 5, 2016 at 20:16
• @LouysPatriceBessette something like this?? if (x < imgs.length){ $('pre').addClass('dark'); $('pre').removeClass('light'); }else{ $('pre').removeClass('dark'); $('pre').addClass('light'); } – DDfrontenderLover Commented Jul 5, 2016 at 20:24

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 8

Working Fiddle Here.

In your HTML, I only added id to your img.
I played a little your pure javascript getImageBrightness... But not that much.

I used "127.5" as the middle line between dark and light.
I suggest you evaluate it... Since the human eye isn't as mathematical as scripts.
;)

Here is the script:

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

本文标签： javascriptDetect if image is darklight and addClass (darklight) to parentStack Overflow