Adaptive Backgrounds – A jQuery plugin for extracting dominant colors | Hacker News Reader

Adaptive Backgrounds – A jQuery plugin for extracting dominant colors

briangonzalez.github.io

176 pointsnsmalch36 comments

I haven't looked at the source in great detail yet so maybe you already have this feature.

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.

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.

Yes, I agree there are potential sensible uses for this, but I hope that the given demonstration won't be taken as a sensible use.

I think we are in violent agreement ;)

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.

Out of curiosity, could this work in node.js to avoid the server VS client thing?

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.

Sure, node.js is a server backend just like any other in this use case.

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.

Beware when you host assets directly from your GitHub source tree. They limit requests - I had to refresh a few times.

Throw a copy of your javascript in the actual gh-pages branch.

Looking at the comments, and the HTTP 503 which i was getting, this seems to be the problem. Worked after a bunch of reloads.

This is one my favorite questions on StackOverflow: http://stackoverflow.com/q/13637892/1273830

RGBaster.js looks to be the underlying library used by the plugin to extract the colors, its written by the same developer (briangonzalez):

https://github.com/briangonzalez/rgbaster.js

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:

demo: http://o-0.me/RgbQuant/

repo: https://github.com/leeoniya/RgbQuant.js

It seems like the problem with it not working very time is Github. I get a 503 on this URL every other time that I load it: http://rawgithub.com/briangonzalez/jquery.adaptive-backgroun...

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.

I don't get it. Tried in several browsers and nothing happened.

Try reloading several times, worked for me after few attempts on latest firefox, chrome and safari

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.

thanks, it worked after several refreshes. I could've checked network panel in chrome to see what's up if I was smart enough.

It is actually quite cool, I tried similar thing (albeit a trivial approach) with css only: http://cssdesk.com/VYN67

Try changing image url in source to see different effect.

It's supposed to change the background to the dominant color of the image as you keep scrolling further down.

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.

This looks fantastic. I don't think I'll ever find a good use for it, but I may shoehorn it into something anyways. It's really pretty!

Like the example on the repo page, I think this could be really useful for images that are not the right size for its container.

Just see some images. Not sure what I'm supposed to be looking at.

This is great and all .. but it doesn't work in the latest chrome?

"Failed to load resource: the server responded with a status of 503 (Service Unavailable)"

Perhaps, a HN DoS?

Appears to be working on latest Win Chrome

the real question is, does it work with WebP?

Reply on news.ycombinator.com