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 были выше остальных.
  • Вопрос задан
  • 2300 просмотров
Решения вопроса 1
Moskus
@Moskus
Вам нужно работать не со всеми цветами из изображения, а с цветовой статистикой.
Методы поиска доминирующих цветов изображения описаны в этой статье на Хабре https://habrahabr.ru/post/156045/ и в трех других, на которые даны ссылки в ее первом абзаце.
Далее, вам нужно искать изображение, в наборе доминирующих цветов которого есть цвет, наиболее близкий к тому, по которому вы осуществляете поиск. Для этого, вам нужно ознакомиться с теорией цветовых пространств и сравнения цветов на основании расстояний между ними в этих пространствах. По это теме начните с https://habrahabr.ru/post/181580/
Это не такая простая задача, как вам кажется. Простые решения для нее дают отвратительный результат.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
06 окт. 2024, в 12:50
10000 руб./за проект
06 окт. 2024, в 11:26
4000 руб./за проект
06 окт. 2024, в 08:42
20000 руб./за проект