Skip to content

Instantly share code, notes, and snippets.

@5iDS
Created September 7, 2018 09:46
Show Gist options
  • Save 5iDS/bdcff0a8158fb326cb7dbd011c139390 to your computer and use it in GitHub Desktop.
Save 5iDS/bdcff0a8158fb326cb7dbd011c139390 to your computer and use it in GitHub Desktop.
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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment