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

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

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.

I did write just for fun. It is a jquery plugin, if you don't use it you can read it for some pointers. If there is some error during the call to get_colors a array is set in the return value to hold the errors, it returns an array of objects, these objects are a histogram of a image(one item in the array for every 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, be = 0, a = 0; var pix = data. Length; for (pix--; pix > 2; pix-=4){ //a = datapix - 0; be = datapix - 1; g = datapix - 2; r = datapix - 3; if (r 0) ++objcolor; else objcolor = 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 a document with only one image with 4 pixels(2x2) "#ff0000, #00ff00, #0000ff, #ff0000", if you do $('img').

Get_colors(); it returns {"ff0000": 2, "0000ff": 1, "00ff00":1}. To learn how to use the canvas element you could look at MDN and at the specs in development for details about pixel manipulation. Edit: commented out a line I was using when debugging.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.