S
S
Stanislav2017-12-04 22:32:03
Node.js
Stanislav, 2017-12-04 22:32:03

How to get the primary colors of an image?

Can you tell me how to extract the primary colors from the picture?
I used npm imagecolors, but the problem is this:
I need to organize a search by image color (/?colors=ffffff), from the available 200k images, all colors when filling the image are stored in the database as an array (['ffffff', 'cccccc ']), and so, the problem is that with imagecolors I get the first 5 colors, as a result, out of 200k images, only one image is found by searching for a specific color (mostly).
It turns out that all pixels with a bunch of shades are taken and, as a result, a search by color finds only one picture.
How to be? What to do?
Maybe there is some npm with which you can get the main color palette (general, predominant) or, for example, npm that allows you to convert hex to a color name so that when fffffff is requested, determine the color as white and find the color names in the array of colors ['white', 'green ', 'orange']
Thanks for any information!
Actually the solution itself, maybe someone will come in handy =)
Install the npm imagecolors package, with it, when saving the image to the server, you will need to get the RGB and Percent of the image's color palette. I save all the data and will most likely experiment with more different samples.
Here's what spits out imagecolors at the moment from a single image

[
    {
         rgb: {
             r:  255,
             g: 255,
             b: 255
         },
         percent: 20.5 // процент преобладания цвета на данном изображении
    },
     {
         rgb: {
             r:  44,
             g: 55,
             b: 66
         },
         percent: 11
    }
]

In the collection, I save all this data in the db.images.pixels field, in the mongoose schema, it's a trite array type

pixels: {type: Array}

I provide users with links to search for pictures by colors of this kind
search?pixels[r]=255&pixels[g]=255&pixels[b]=255&pixels[min]=10

The min key specifies the minimum percentage of color in the image, i.e. in this case, I will get those pictures in which the white color is from 10% in relation to other colors.
Here is an example sample for clarity
Col.find({
     pixels: {
         '$elemMatch': {
              'rgb.r':  { $lte: 255-10,  $gte: 255+10 },
              'rgb.g':  { $lte: 255-10,  $gte: 255+10 },
              'rgb.b':  { $lte: 255-10,  $gte: 255+10 },
              'percent': { $gte: 10 }
         
     }
})

With such a sample, I get a very good result.
Then I'll sort it out so that the pictures with the maximum percent are higher than the rest.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
Moskus, 2017-12-04
@ms-dred

You don't need to work with all the colors in the image, but with the color statistics.
Methods for searching for the dominant colors of an image are described in this article on Habré https://habrahabr.ru/post/156045/ and in three others, which are referenced in its first paragraph.
Next, you need to search for an image whose dominant color set contains the closest color to the one you are searching for. To do this, you need to be familiar with the theory of color spaces and comparing colors based on the distances between them in these spaces. On this topic, start with https://habrahabr.ru/post/181580/
This is not such an easy task as you think. Simple solutions for her give a disgusting result.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question