search

briangonzalez / jquery.adaptive-backgrounds.js

🦎 A jQuery plugin for extracting the dominant color from images and applying the color to their parent.
http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/
6.54k stars 454 forks source link

Return wrong dominant color in chrome, firefox but alright in safari #66

Closed mokku86 closed 7 years ago

mokku86 commented 8 years ago

Hi,

I was testing some artist image with your plugin, but I found out that some of my picture is picking the incorrect dominant color. This only occur on chrome and firefox. But safari seem to doing pretty nice.

Attached 2 images for your comparison. safari chrome

AlfredJKwack commented 7 years ago

This should now be fixed.

There was an issue with the underlying RGBaster.js library which:

The latter issue is of no bearing to AD

Would you mind checking and validating if the issue still exists.

f1ss1on commented 7 years ago

I'm having same issue. Website I have the latest version being used.

AlfredJKwack commented 7 years ago

Hi @f1ss1on,

I can't seem to reproduce the issue. Chrome and Safari give the same rendering for the page on Mac OS... could you be a little more explicit.

f1ss1on commented 7 years ago

Hi @AlfredJKwack,

If you look at the link I provided, the color of the cars seem to be the most prominent colors. For some reason though only black and white are pulling as the dominant colors.

Chrome, Firefox, Edge, Explorer on Windows are all returning same color.

Sample Page

Is there a way to adjust this to where it picks up more of a dominant color?

capture capture2 capture3

AlfredJKwack commented 7 years ago

Hi @f1ss1on

This is going to take a little explaining but essentially the most prominent colours are not what you think. There's a difference between what the eye percieves (the highlights) and the actual image.

The underlying library that actually determines the dominant color looks at each pixel and keeps track how often each color appears. It then orders that list and the color with the most pixels wins out. I've tested your images with a couple of libraries and they all pretty much give the same result as you saw here.

Sorry I can't be of any further help.

AlfredJKwack commented 7 years ago

Breaking this down a little more.

Below are 4 different CodePen implementations with your images. None of them show exactly what you would expect though one does get pretty close.

As you can see you have some options.

Not all libraries are created equal. Each has its pros and cons. To my knowledge there is no other library like Adaptive Backgrounds built on top of either the Color-Thief or the RgbQuant libraries.

Those two libraries also have a slightly different aim from RGBaster, on top of which Adaptive Backgrounds is built. RgbQuant for instance is not built to give you a palette, that's a side effect more than anything else. It's aim is to quantize images through different algorythms. Color-Thief is probably closer to what you're aiming for given your input images.It doesn't handle the background-coloring work for you though, you'd have to build it.

Some further options you could look into are:

Hope this helps.