Skip to content

Instantly share code, notes, and snippets.

@fuzzyfox
Last active August 31, 2020 17:33
Show Gist options
  • Select an option

  • Save fuzzyfox/5844826 to your computer and use it in GitHub Desktop.

Select an option

Save fuzzyfox/5844826 to your computer and use it in GitHub Desktop.
JavaScript: image average color
var getAverageColor = (function(window, document, undefined){
return function(imageURL, options}){
options = {
// image split into blocks of x pixels wide, 1 high
blocksize: options.blocksize || 5,
fallbackColor: options.fallbackColor || '#000'
};
var img = document.createElement('img'),
canvas = document.createElement('canvas'),
context = canvas.getContext && canvas.getContext('2d'),
i = -4,
count = 0,
rgb = {
r: 0,
g: 0,
b: 0
},
data, width, height, length;
if(!context){
return options.fallback_color;
}
height = canvas.height = img.naturalHeight || img.offsetHeight || img.height;
width = canvas.width = img.naturalWidth || img.offsetWidth || img.width;
// create a dom element for the image
img.src = imageURL;
img.id = 'averageColorImg';
img.style.display = 'none';
// draw image in canvas to make calculation easier
context.drawImage(img, 0, 0);
try {
data = context.getImageData(0, 0, width, height);
}
catch(e){
// security error, img on different domain
return options.fallback_color;
}
length = data.data.length;
// get rgb values for each pixel at the end of the block
while((i += blocksize * 4) < length){
++count;
rgb.r += data.data[i];
rgb.g += data.data[i+1];
rgb.b += data.data[i+2];
}
// ~~used to floor values
rgb.r = ~~(rgb.r/count);
rgb.g = ~~(rgb.g/count);
rgb.b = ~~(rgb.b/count);
return 'rgb('+rgb.r+', '+rgb.g+', '+rgb.b+')';
};
})(this, this.document);
@RezaAmd
Copy link
Copy Markdown

RezaAmd commented Aug 20, 2019

how to use this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment