3

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/

Ricardo Rodrigues
  • 2,633
  • 5
  • 29
  • 31

2 Answers2

3

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.

Community
  • 1
  • 1
nrabinowitz
  • 55,314
  • 10
  • 149
  • 165
  • Thanks , will check if i can use you're plugin. Already have data from an image using a canvas. But need a plugin to cluster the data (pixels) so then i can use you're code . – Ricardo Rodrigues Aug 02 '11 at 16:23
  • pv is not defined appearing this – Ricardo Rodrigues Aug 02 '11 at 17:13
  • Yes, sorry - this currently has a dependency on the protovis library (http://mbostock.github.com/protovis/). It's only a couple of small functions - I'll move them into the gist. – nrabinowitz Aug 02 '11 at 17:58
  • Added the dependencies into the gist. Note that this code also assumes support for JavaScript 1.6 Array functions (`.forEach()`, etc), so it won't work in older versions of IE without adding support for these. – nrabinowitz Aug 02 '11 at 18:09
  • Uhm...will check i later, for now just using Firefox and Chrome. Quite handy you're code. Probably not perfect, but giving a nice pallete. – Ricardo Rodrigues Aug 03 '11 at 13:38
  • To finish probably just need a function from 12 get me the color that is most used. Not sure how is limit the range of colors. – Ricardo Rodrigues Aug 03 '11 at 13:40
  • for example if in a list i have , green, red light, red dark , blue , yellow, pink, grey ... what should be the correct color? RED .. not sure if an algorithm for that. – Ricardo Rodrigues Aug 03 '11 at 13:42
  • do you just want the color with the most pixels from a 12-color palette? You can do this with my code, though it's a bit of a pain - The palette provided by `cmap.palette()` is not quite in count order. – nrabinowitz Aug 03 '11 at 16:17
  • Have to check it better then..how can i use to do it. Testing another way to do. – Ricardo Rodrigues Aug 03 '11 at 21:39
  • 3
    Achieve finally a result nice, near to expected. Just try to merge you're library and using this ones: http://harthur.github.com/clusterfck/ and https://github.com/harthur/rainbow/tree/master/chrome/content/analyzer . For the future this article can be helpfull too http://harthur.wordpress.com/2009/12/18/getting-the-color-scheme-of-a-website-using-canvas-and-hierarchical-clustering/ Soon will try to put the code someplace, with minimal thing, so people can test and improve the code. :) Thanks for the help – Ricardo Rodrigues Aug 05 '11 at 11:38
  • Those look really good - thanks for the links, and glad you got this working! – nrabinowitz Aug 05 '11 at 17:03
  • Haven't done nothing special at the end, more a question reusing you're and clusterfck returnsm and defining some threshold. – Ricardo Rodrigues Aug 05 '11 at 19:12
  • For those interested can always check [www.brandmymail.com](http://www.brandmymail.com) , in the custom theme , upload an image ... check the color picked for the background. – Ricardo Rodrigues Dec 12 '11 at 11:39
0

May be you can try PnnQuant.js
Demo 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.

Miller Cy Chan
  • 897
  • 9
  • 19