Skip to content

Instantly share code, notes, and snippets.

@tomasdev
Last active November 18, 2023 15:00
Show Gist options
  • Save tomasdev/cf5a547290a14d829bdace43a5b0621a to your computer and use it in GitHub Desktop.
Save tomasdev/cf5a547290a14d829bdace43a5b0621a to your computer and use it in GitHub Desktop.
JavaScript dominant color for image

Inspired by manu.ninja approach there's a front-end (or nodejs if using node-canvas) equivalent without using GraphicsMagick:

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const image = new Image();
image.onload = () => {
    canvas.width = image.width;
    canvas.height = image.height;
    context.drawImage(image, 0, 0, 1, 1);
    alert(`color is rgba(${context.getImageData(0, 0, 1, 1).data.join(',')})`);
};
image.src = 'pic.jpg';

Do take into consideration all CORS rules apply.

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