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

Question

Something that can do something like

<img class="image" ... /> $(".image").get_colors() 

I know that there are several sites where you can upload your image, and it will generate color for you, but I want something to appear on my site.

Something like this , where you see the colors created in the screenshot, and you can search by color. I tried to check the source code, but I did not see a link to the js library.

I need this function to work with js, if possible.

EDIT: The image will already be on the page; I just need to generate its color, so I do not need the load functions.

Thanks.

Answer 1

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

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

The hard part identifies or creates a small selection of typical colors, rather than the 10,000 colors that can be in a 100x100 image. This is a rather complex problem: many solutions ( review here ). You can see the Javascript implementation of two possible algorithms in the libraryfck library and my port of the modified Leptonic median cutting algorithm .

Answer 2

I wrote just for fun. This is a jquery plugin, if you are not using it, you can read it for some pointers. If there is some error during the call to get_colors an array is installed in the return value for storing errors, it returns an array of objects, these objects are a histogram of the image (one element in the array for each selected element).

 (function($, window, document, undefined){ var canvas = document.createElement('canvas'); if (canvas && canvas.getContext){ $.fn.get_colors = function(){ var rv = []; this.each(function(){ var tagname = this.tagName.toLowerCase(); if ((tagname === 'img') || (tagname === 'canvas') || (tagname === 'video')){ //something bad can happend when drawing the image try{ var w = this.getAttribute('width'); var h = this.getAttribute('height'); canvas.setAttribute('width', w); canvas.setAttribute('height', h); var ctxt = canvas.getContext('2d'); if (ctxt){ ctxt.drawImage(this, 0, 0); var imagedata = ctxt.getImageData(0, 0, w, h); var data = imagedata.data; //log('imagedata.width:'+imagedata.width+' imagedata.height:'+imagedata.height+' w:'+w+' h:'+h); var obj = {}; var color = ''; var r = 0, g = 0, b = 0, a = 0; var pix = data.length; for (pix--; pix > 2; pix-=4){ //a = data[pix - 0]; b = data[pix - 1]; g = data[pix - 2]; r = data[pix - 3]; if (r < 16) r = '0' + r.toString(16); else r = r.toString(16); if (g < 16) g = '0' + g.toString(16); else g = g.toString(16); if (b < 16) b = '0' + b.toString(16); else b = b.toString(16); //if (a < 16) a = '0' + r.toString(16); //else a = a.toString(16); //color = r + g + b + a; color = r + g + b; if (obj[color] > 0) ++obj[color]; else obj[color] = 1; } rv.push(obj); imagedata = data = obj = null; } ctxt = null; } catch(error){ if (!rv.errors){ rv.errors = []; } rv.errors.push(error); } } }); return rv; }; } else{ $.fn.get_colors = function(){ throw new Error('canvas element support required!'); }; } })(jQuery, this, this.document); 

If the document with one image with 4 pixels (2x2) is "# ff0000, # 00ff00, # 0000ff, # ff0000", if you execute $('img').get_colors(); , it returns [{"ff0000": 2, "0000ff": 1, "00ff00":1}] .

To learn how to use the canvas element, you can look at the MDN and specs for details on manipulating pixels.

Edit: commented on the line I used when debugging.

Answer 3

Have you seen this project on Github?

http://lokeshdhakar.com/projects/color-thief/

This is a javascript solution. (This depends on two additional libraries: jquery, quantize.js).

 var colorThief = new ColorThief(); colorThief.getPalette(sourceImage, 8); getPalette(sourceImage[, colorCount, quality]) 

Which will return an array, for example: [[num, num, num], [num, num, num], ...]