Skip to content

Instantly share code, notes, and snippets.

@VincentN
Last active February 11, 2019 13:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save VincentN/62d4b5d8c1b1fdfa3bc7bdf8f98c731c to your computer and use it in GitHub Desktop.
Save VincentN/62d4b5d8c1b1fdfa3bc7bdf8f98c731c to your computer and use it in GitHub Desktop.
Get average color from image

Average color

Creates a Canvas with size 1x1 and puts an image inside it. Being 1x1 pixel, that pixel now contains the average color :-) (as rgba value)

<img src="data:image/jpeg;base64,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" />
const img = document.querySelector( 'img' );
const canvas = document.createElement( 'canvas' );
const ctx = canvas.getContext( '2d' );
canvas.width = canvas.height = 1;
const rgba = [ ...ctx.getImageData( 0, 0, 1, 1 ).data ];
rgba[3] = rgba[3] / 255;
document.body.style.background = `rgba(${rgba.join(',')})`;
console.log( rgba, document.body.style.background )
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment