Firstly, I like it.
It's an elegant solution that gives excellent results and works as it says.
Secondly, I don't like it.
In the general case, this is not something that should be left to the client to calculate - whenever you are serving the image, the server ought to know what the dominant colour is. Why make the client calculate this every time the image is displayed?
This is a case where JavaScript harms the user: a JavaScript/jQuery solution to this has significant potential problems: there are numerous cases where it will break, some of which are identified in the other comments.
There are other use cases like suggesting a color palette based on an image upload before it ever gets sent to the server. Something like an admin interface for creating news article pages/blogs that orient around a particular theme.
I agree with the server handling of this if the server is providing the image but I could imagine HTML5 web apps making use of color analysis before the image ever gets sent to the server. JS isn't going away regardless of how much we close our eyes and pretend it's not there.
Fair enough but it's trickier to demo something that requires more elaborate user action. My reach-bag scenario wasn't so contrived actually we had to develop something that would guess a color palette based on a user uploaded picture at Mozilla.
The end product was never realized in that form but our solution included using a 2d canvas also and doing a count of color segments.
I think this script depends on the DOM, so you'd have to do jsdom or some other shenanagains to use it directly. However, the general idea should work just fine in node.js.
A lot of these client side solutions make it easier to build quick and dirty websites. I have several ideas for how this plugin could be pretty useful on some throwaway sites.
shameless plug for RqbQuant.js (my lib for color quantization) which can be used for the same purpose by changing the output palette size from 256 to 16 or whatever, try it here:
Rawgithub.com is not actually affiliated with GitHub. They also specifically say not to direct production traffic to their servers, or you'll run into problems.
The author of this seems not to have paid attention to that, which is particularly silly since the page is hosted on GitHub pages, and the assets can (and should) be hosted there as well.
I was not anticipating on my little 3 hour jQuery plugin hitting the front page of HN, so I didn't take certain precautions. That's a good problem to have.
In any case, I've now moved the library to also be hosted on Github pages.
I didn't mean to be harsh. "Never assume you won't hit the front page of a major traffic driver" is just kind of a lesson that everyone has to learn for themselves.
Or maybe don't. You're hammering the servers of the poor folks at rawgithub.com, who specifically asked that their service not be used for heavy traffic situations.
It wasn't working for me and I got the following error "Uncaught IndexSizeError: Index or size was negative, or greater than the allowed value.". However it worked in incognito mode, I could reproduce the problem by enabling Disconnect in incognito mode. If you are having troubles try using incognito mode.
Same here. Only worked in incognito mode. Pretty cool effect. It'd be nice if the effect were more subtle when the edge colors where the dominant color so that the image doesn't end up blending in too much with the background.
Any particular reason for the jQuery dependency? I can't see any good reason for tying this to jQuery, since I would expect it only to use jQuery for selecting a DOM element, which is more than easy enough to do without jQuery.
I think it has to do with jQuery becoming the dominant standard for everything web, that said it's not too much code so removing both the dependency on jQuery and the dependency on underscore should be fairly simple.
The trend of jQuery becoming the dominant standard for everything web has been reversing for 2-3 years now, and that is only going to accelerate as more people are able to abandon support for IE6, IE7 and IE8. JavaScript in most modern browsers makes most of jQuery redundant.
A dependency on underscore strikes me as usually being more reasonable if you use more than 1-2 functions from the library. I regularly use many functions from underscore when I include it in a project since it includes many utility functions for functional programming that are missing from the basic prototypes in JavaScript.
Clever. How does it actually extract the dominant color? What kind of mathematics involved in this kind of stuff? From an architect point of view, does it make sense to do this on the client side?
The plugin uses the getImageData method on the Image object. It iterates over a portion of the pixels in an image, keeping track of color occurrences. It then returns the most dominant color and any other highly occurrent colors.
It would be nice if you could specify an offset along the color wheel to select complimentary or analogous colors.
The default of selecting the dominant color removes all contrast between the image and the background which seems like a rarely desired behavior.