Задать вопрос
ms-dred
@ms-dred
Вечно что то не то и что то не так...

Как получить основные цвета картинки?

Подскажите чем можно вытащить основные цвета из картинки?
Пользовался npm imagecolors, но проблема заключается в следующем:
Мне нужно организовать поиск по цвету картинки (/?colors=ffffff), из имеющихся 200к изображений, все цвета при заливки изображения сохраняются в базу данных в виде массива (['ffffff', 'cccccc']), так вот, проблема в том что с imagecolors я получаю 5 первых цветов, в итоге из 200к изображений по поиску определенного цвета находится только одно изображение (в основном).

Получается что берутся все пиксели с кучей оттенков и в итоге поиск по цвету находит только одну картинку.
Как быть? Что делать?
Может есть какие то npm с помощью которых можно получить основную цветовую палитру (общую, преобладающую) или например npm позволяющие сконвертировать hex в название цвета, чтобы при запросе fffffff определить цвет как white и найти названия цветов в массиве цветов ['white', 'green', 'orange']

Спасибо за любую информацию!

Собственно само решение, может кому то и пригодится =)
Устанавливаем пакет npm imagecolors, с помощью него при сохранении картинки на сервер нужно будет получить RGB и Percent цветовой палитры картинки. Я сохраняю все данные и всего скорее буду экспериментировать еще с различными выборками.
Вот то нужно что выплевывает imagecolors на данный момент с одного изображения
[
    {
         rgb: {
             r:  255,
             g: 255,
             b: 255
         },
         percent: 20.5 // процент преобладания цвета на данном изображении
    },
     {
         rgb: {
             r:  44,
             g: 55,
             b: 66
         },
         percent: 11
    }
]


В коллекции я сохраняю все это данные в поле db.images.pixels, в схеме монгуста банально тип массив

pixels: { type: Array }


Пользователям предоставляю ссылки на поиск картинок по цветам такого вида
search?pixels[r]=255&pixels[g]=255&pixels[b]=255&pixels[min]=10

Ключ min указывает минимальный процент цвета на изображении, т.е. в данном случае я получу те картинки в которых белый цвет от 10% по отношению к другим цветам.

Вот пример выборки для наглядности
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 }
         
     }
})

При такой выборке очень даже неплохой результат получаю.
Потом еще сортировкой займусь чтобы картинки с максимальным percent были выше остальных.
  • Вопрос задан
  • 2352 просмотра
Подписаться 3 Средний Комментировать
Решения вопроса 1
Moskus
@Moskus
Вам нужно работать не со всеми цветами из изображения, а с цветовой статистикой.
Методы поиска доминирующих цветов изображения описаны в этой статье на Хабре https://habrahabr.ru/post/156045/ и в трех других, на которые даны ссылки в ее первом абзаце.
Далее, вам нужно искать изображение, в наборе доминирующих цветов которого есть цвет, наиболее близкий к тому, по которому вы осуществляете поиск. Для этого, вам нужно ознакомиться с теорией цветовых пространств и сравнения цветов на основании расстояний между ними в этих пространствах. По это теме начните с https://habrahabr.ru/post/181580/
Это не такая простая задача, как вам кажется. Простые решения для нее дают отвратительный результат.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы