Skip to content

Instantly share code, notes, and snippets.

@fuzzyfox
Last active August 31, 2020 17:33
  • Star 6 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
Star You must be signed in to star a gist
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

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