Javascript Image Main Cluster Color

I'm looking for a way trough javascript find the main color from a image. Probably trough some algorithm to cluster some areas. Problem because if I use pixel, will count more pix

Solution 1:

This is tough but doable.

The first step is to get the pixel data from the image - in order to do this, you'll need to draw the image onto a canvas element and get the pixel data. Note that the Same Origin Policy applies to the image, so the image must be on the same server as the script or you'll need to use a proxy.

Now you can apply an algorithm to the pixel data to find the "main" color. The easiest option is the average, but it sounds like you don't want that. There are a lot of clustering algorithms out there; probably what you want is to perform color quantization to reduce the number of colors in the palette to some small number, then take the color that represents the most pixels in an image.

The median cut algorithm is a good, relatively simple option here, though it's still a fair amount of coding. I worked on a small hobby project to implement this algorithm in Javascript - you can see my code here. It won't work for you out of the box, but I've probably done most of the hard work for you.

Solution 2:

May be you can try PnnQuant.jsDemo site: https://mcychan.github.io/PnnQuant.js/demo/

CIEDE2000 color difference formula is adapted by choosing radio button with Quality: High

On top of that, Web Workers is used to create a background thread to invoke long running scripts and handle computationally intensive tasks like the image quantization.