Question

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 pixels used. Ex. if i have brown and very colors next to brown, then a part with white. the main color could be white. And not want color average because could not represent the real color of the image.

Any suggestion of plugins, code to implement, websites . Thanks in advance

UPDATE

Something like this :

http://www.cssdrive.com/imagepalette/

There here something explaining, not sure if i can reuse the js code.

http://harthur.wordpress.com/2009/12/18/getting-the-color-scheme-of-a-website-using-canvas-and-hierarchical-clustering/

Answer 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.