Is there a js library can can generate a color palette from an image?

Question

Something that might do something like

<img  class="image" ... />

$(".image").get_colors()

I know there are few websites where you can upload your image and it would generate the color for you but I want something to put on my website

Something like this where you see the colors generated from the screenshot and can search by colors. I tried to check the source code but I could not see any reference to a js library.

I need this feature to work with js if possible.

EDIT: The image would be on the page already; I just need to generate its color, so I don't want the uploading features.

Thanks.

Answer 1

You might be interested in this related question and my answer to another one.

Getting all the colors from an image is simple, at least in a browser that supports the canvas element - the technique is described here. You end up with a CanvasPixelArray (described here), which is essentially an array like [r,g,b,a,r,g,b,a, ...] where r,g,b,a are bytes indicating the red, green, blue, and alpha values of each pixel.

The hard part is identifying or creating a small selection of representative colors, rather than the 10,000 colors that might be in a 100x100 image. This is a pretty complicated problem, with many solutions (overview here). You can see Javascript implementations of two possible algorithms in the clusterfck library and my port of the Leptonica Modified Median Cut algorithm.