5

I'm working on a space wallpaper sharing gallery. I've used the JavaScript library color-thief to retrieve the dominant colors of an image, but I have a problem. Most wallpapers are dark. If when searching for a wallpaper, a user chooses say a blue color like #07F, he will not get the many dark wallpapers that have this color, because the dominant color these wallpapers will be close to black.

I could allow the use of multiple dominant colors for searching (i.e black and blue for example), but that would make the search more complicated.

Is there any JavaScript library (must be done on client side) able to get the dominant hues of an image ? And if not, do you have any idea about how i could implement an algorithm for doing it ?

Thanks for reading :)

tk421
  • 5,775
  • 6
  • 23
  • 34
Virus721
  • 8,061
  • 12
  • 67
  • 123
  • See http://stackoverflow.com/questions/13811483/getting-dominant-color-of-an-image?rq=1 – John Dvorak Dec 30 '12 at 13:47
  • I would just find the hue of the dominant color http://stackoverflow.com/questions/3732046/how-do-you-get-the-hue-of-a-xxxxxx-colour – bkconrad Dec 30 '12 at 13:53
  • @bkconrad, you'd find hue of black, according to OP. Actually good idea would be do find most dominant color after black (and maybe also white). – Oleg V. Volkov Dec 30 '12 at 13:54
  • Thanks for your comments. Oleg's solution is interesting, i'll think about it. – Virus721 Dec 30 '12 at 14:01
  • 1
    @OlegV.Volkov: there's no such a thing as the hue of black or of white. The hue of `#000001` is exactly the same as the hue of `#0000FF` and of `#FEFEFF`. Black and white simply have no hue at all. – 6502 Dec 30 '12 at 15:10
  • I would investigate image segmentation using color. find and measure the regions of color that the image has. For this I guess you would have to build some sort of histogram and smooth it so that similar colors are treated the same. I have done grayscale segmentation before but not color, so I cannot help more here. Then when you find your regions, pick the largest one, or use some other algorithm to pick a region. Perhaps the region that does not touch the borders? – akonsu May 10 '13 at 17:47

1 Answers1

1

This is more of a design question than Javascript. Dominant color is not always the one that covers the most pixels. It's the color that catches your eye. For example, if you show someone a picture of a pink galaxy on black background, dominant color is not black, but pink, because the main subject is pink. So you need a much more complex algorythm than that.

Also, black and white are technically not colors. They are merely complete absence of light or extreme highlights (or light sources) respectively. So I would rule out anything that is darker than or lighter than a predefeined threshold (e.g., exclude the top and bottom 5% in your calculation).

EDIT:

I myself might actually try to get the color of the most saturated pixels above a certain threshold (e.g., more than X pixel-count to avoid false positives due to noise) with a margin of error.

EDIT2:

You might be able to change L155 to test the saturation and darkness of the pixel. You might want to get ahold of a library that does RGB->HSB conversion for this purpose, but I don't know if there's a good one.

  • Thanks for your answer ! Looks similar to what Oleg said. – Virus721 Dec 30 '12 at 15:11
  • In digital images it doesn't really make sense to say that black and white are not technically colors. Now, I didn't bother looking into how this color-thief thing works, but if it doesn't perform any kind of color clustering then the dominant hues you obtain from it are mostly useless. Secondly, there is some kind of misunderstanding going on here. There is no reason to consider only THE dominating hue, instead you want the K dominating hues, so a search for a single hue X will return the images where X is present in its list of K dominant hues. – mmgp Dec 30 '12 at 15:59
  • @mmgp: We are talking about translating user's intent into data. So it matters a _lot_ to know how people perceive color, not how machine interpret pixels. –  Dec 31 '12 at 15:21
  • @mmgp: Just to add that I generally agree that using K dominant hues would be an efficient strategy, too. :) –  Dec 31 '12 at 15:22
  • @bvukelic translating user's intent into data is even a stronger reason to consider black and white as actual colors, I'm not sure where you are going with that argument. – mmgp Dec 31 '12 at 16:07
  • @mmgp: Dominant is human-perception terms isn't the same with colors with most coverage. Also, black isn't perceived as a color in most cases, but simply as part of the image in the shadow (so to speak). The black as a color usually isn't #000 (except when image is poorly processed), but somewhat in the lower 3~7% of the brightness scale. Same applies to white in reverse. Simply taking pixels with most coverage is oversimplyfying the problem which leads to obvious problems such as the one described by OP. –  Dec 31 '12 at 18:43
  • Just don't put words in my responses and we can discuss the matter just fine. I never said that dominant means what you are implying I did. Plus, It should be absolutely obvious that no one is saying that red is only when we have a representation of #f00, and black #000, and white #fff, and etc. – mmgp Dec 31 '12 at 18:47
  • Apologies about dominant, totally misread your post. About black/white issue, you may be referring to black as in general speech black which is a mostly desaturated color with brightness in the lower end. I am referring to black and white strictly as #000 and #fff, and a very small area of brighness close to those values, because vaccum in space is completely black since there is no light source in vacuum, nor a particle that can reflect light. Therefore, most of the image would be pure black, and that should not be taken into acount in this case. –  Dec 31 '12 at 18:54