HTML5/Canvas Fun: Extracting Colors from Images
As always, view-source to see what’s going on under the hood. In a nutshell: I’m loading an image into a canvas element and pulling out color data from every pixel (using getImageData and a CanvasPixelArray). This creates an array of the red, green, blue and alpha values of every damn pixel. Once we have that data, we can simply count the instances of each color and extract the top 10 colors. I quickly realized that I was getting slight variations of a single color in the results. To accomodate for this, I added some logic to check each color from the top values against colors already shown. If a similar color has already been shown, I threw it out and moved on to the next most present color. There may be a better way to exclude similar colors, but this is a decent first pass.
As always, comments and suggestions for improvement are very welcome.
Note: I am using a bit of PHP to pull in the remote image entered in the text box. This is to work around a security limitation of the browser that prevents loading of remote images. Not terribly secure if it’s this simply to work around 😉
UPDATE: Per Greg’s suggestion (below) I’ve added the RGB values to each color tile, for easy copy/paste.