
Adaptive Backgrounds – A jQuery plugin for extracting dominant colors - nsmalch
http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/
======
iamthepieman
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.

------
ronaldx
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.

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

~~~
nfriedly
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.

------
prezjordan
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.

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

------
gprasanth
This is one my favorite questions on StackOverflow:
[http://stackoverflow.com/q/13637892/1273830](http://stackoverflow.com/q/13637892/1273830)

------
eliot_sykes
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](https://github.com/briangonzalez/rgbaster.js)

~~~
leeoniya
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/](http://o-0.me/RgbQuant/)

repo:
[https://github.com/leeoniya/RgbQuant.js](https://github.com/leeoniya/RgbQuant.js)

------
nchapman
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...](http://rawgithub.com/briangonzalez/jquery.adaptive-
backgrounds.js/master/src/jquery.adaptive-background.js)

~~~
mistercow
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.

~~~
briangonzalez
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.

~~~
mistercow
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.

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

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

~~~
mistercow
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.

------
K0nserv
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.

~~~
malandrew
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.

~~~
K0nserv
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.

~~~
malandrew
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.

------
chenster
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?

~~~
briangonzalez
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.

------
wittekm
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!

------
deevus
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.

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

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

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

Perhaps, a HN DoS?

