Does anyone know if there is a script available to detect darkness/lightness in an image (html included) using a client sided script?
I basically want to be able to detect the type of image (dark/light) used in the background and have CSS/HTML/Jquery/JS adapt the page based on a variable that is either dark of light (true of false).
I know there are server sided script available but cannot use that for this particular development.
Thanks in advance.
This function will convert each color to gray scale and return average of all pixels, so final value will be between 0 (darkest) and 255 (brightest)
function getImageLightness(imageSrc,callback) {
var img = document.createElement("img");
img.src = imageSrc;
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(brightness);
}
}
Usage:
getImageLightness("image.jpg",function(brightness){
console.log(brightness);
});
JSFiddle: