Выбор цвета на изображении может быть полезен для многих приложений. Например, вы можете захотеть извлечь доминирующие цвета из изображения продукта, чтобы создать цветовую палитру. Или вам может потребоваться взять образцы цветов с фотографии, чтобы точно их сопоставить.
Существует несколько способов решения этой задачи программным путем. Общий процесс включает:
1. Загрузка изображения в программу или скрипт
2. Анализ изображения для определения его цветовых компонентов
3. Выбор одного или нескольких цветов на основе пикселей, частоты цвета и т. д.
Конкретные особенности зависят от вашего языка программирования и библиотек обработки изображений. Но большинство современных языков, таких как Python или JavaScript, имеют библиотеки для загрузки изображений, сканирования значений пикселей и извлечения цветовой информации.
В этой статье мы рассмотрим некоторые распространенные методы программной выборки цветов из изображений. Мы рассмотрим подходы как в Python, так и в JavaScript.
Первым шагом является загрузка файла изображения в формат, который мы можем проанализировать.
Большинство библиотек обработки изображений работают с числовыми массивами, представляющими цвета пикселей, а не с файлами изображений напрямую. Поэтому нам нужно декодировать файл JPEG или PNG в массив пикселей.
В Python мы можем использовать библиотеку Pillow:
“`python
from PIL import Image
img = Image.open('image.jpg')
pixels = img.load()
“`
Это загружает изображение в объект PixelAccess. Затем мы можем получить доступ к значениям RGB каждого пикселя через pixels[x, y].
В качестве альтернативы мы могли бы преобразовать изображение в массив NumPy:
“`python
import numpy as np
arr = np.asarray(img)
“`
Это дает нам обычный массив NumPy, который мы можем разрезать и обрабатывать.
В JavaScript мы можем использовать элемент холста:
“`js
const img = new Image();
img.src = 'image.jpg';
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
“`
Это отображает изображение на холсте, затем извлекает данные пикселей в объект ImageData, похожий на массив.
Ключевым моментом является то, что у нас есть числовые значения RGBA для каждого пикселя изображения, которые мы можем сканировать и обрабатывать.
Один из подходов к выбору цвета — поиск наиболее частых или доминирующих цветов на изображении. Мы можем сделать это, подсчитав вхождения цветов.
Псевдокод:
1. Просканируйте все пиксели изображения
2. Квантуйте / округлите значения RGB в ячейки
3. Подсчитайте вхождения каждого квантованного цвета
4. Найдите наиболее частые ячейки
Например, вот как мы могли бы реализовать это в Python:
“`python
from PIL import Image
import numpy as np
img = Image.open('image.jpg')
pixels = img.load()
color_counts = {}
for x in range(img.width):
for y in range(img.height):
# Квантуйте цвет пикселя
r = pixels[x, y][0] // 20 * 20
g = pixels[x, y][1] // 20 * 20
b = pixels[x, y][2] // 20 * 20
rgb = (r, g, b)
if rgb in color_counts:
color_counts[rgb] += 1
else:
color_counts[rgb] = 1
sorted_counts = sorted(color_counts.items(),
key=lambda x: x[1], reverse=True)
dominant_color = sorted_counts[0][0]
“`
Это объединяет пиксели в цветовые ячейки, подсчитывает ячейки, а затем извлекает ячейку с наибольшим количеством.
Мы могли бы улучшить это с помощью средневзвешенных значений, а не только верхнего цвета. Но он показывает базовый подход к квантованию.
Вместо того, чтобы анализировать все изображение, мы также можем выбирать цвета из определенных областей.
Некоторые примеры:
– Выберите центральный пиксель изображения
– Усредните небольшую область, например блок размером 10?10 пикселей
– Вычислите выборку пикселей по краям или границам
– Выберите случайные точки по всему изображению
Этот пример кода берет случайную выборку пикселей из изображения:
“`python
from PIL import Image
import random
img = Image.open('image.jpg')
pixels = img.load()
color_samples = []
for i in range(100):
x = random.randint(0, img.width-1)
y = random.randint(0, img.height-1)
color = pixels[x, y]
color_samples.append(color)
avg_color = [
sum(c[0] for c in color_samples) // len(color_samples),
sum(c[1] for c in color_samples) // len(color_samples),
sum(c[2] for c in color_samples) // len(color_samples)
]
“`
Это берет 100 случайных пикселей, затем усредняет их компоненты RGB в один цвет.
Вы можете сместить выборку в сторону определенных областей, например, сосредоточившись на центре по сравнению с краями.
Более продвинутый подход заключается в использовании кластеризации K-средних для извлечения наиболее яркие цвета.
K-Means — это неконтролируемый алгоритм машинного обучения, который кластеризует точки данных в k групп.
Мы можем использовать его для кластеризации похожих цветов в палитре изображения. Центр каждого кластера будет иметь выраженный цвет.
Вот пример на Python с помощью scikit-learn:
“`python
import numpy as np
from PIL import Image
from sklearn.cluster import KMeans
img = Image.open('image.jpg')
pixels = img.load()
pixel_values = []
for x in range(img.width):
for y in range(img.height):
pixel_values.append(pixels[x, y])
pixel_values = np.array(pixel_values)
kmeans = KMeans(n_clusters=5).fit(pixel_values)
cluster_centers = kmeans.cluster_centers_
prominent_colors = [tuple(map(int, c)) for c in cluster_centers]
“`
Мы извлекаем все пиксели RGB, преобразуем их в двумерный массив, затем передаем их в KMeans.
Cluster_centers содержат средние значения RGB для каждого из 5 кластеров. Мы преобразуем их обратно в целочисленные кортежи, чтобы получить окончательные цвета.
K-Means позволяет нам эффективно извлекать тысячи пикселей из наиболее репрезентативных цветов. Параметр k можно настроить, чтобы получить больше или меньше цветов.
Еще одним соображением при выборке цветов является цветовое пространство.
Пиксели обычно представлены в формате RGB. Но у RGB есть некоторые ограничения:
– Значения компонентов коррелируют
– Это не соответствует человеческому цветовосприятию
– Похожие цвета могут иметь совершенно разные значения RGB
Альтернативные цветовые пространства, такие как HSV и LAB, решают эти проблемы. Они лучше разделяют цветность и яркость и согласуются с тем, как мы видим цвет.
Часто бывает полезно преобразовать в другое цветовое пространство перед выборкой:
“`python
from PIL import Image
import colorsys
img = Image.open('image.jpg')
pixels = img.load()
for x in range(img.width):
for y in range(img.height):
# Преобразовать RGB в HSV
r, g, b = pixels[x, y]
h, s, v = colorsys.rgb_to_hsv(r/255, g/255, b/255)
# Использовать компоненты HSV для выборки…
“`
Это позволяет вам напрямую анализировать цвета по оттенку, насыщенности, значению, а не чем базовое хранилище RGB.
Некоторые цветовые пространства, такие как LAB, не зависят от устройства, то есть значения не зависят от датчика, захватывающего изображение. Это может помочь при сравнении цветов с разных изображений и камер.
Давайте обсудим некоторые реальные приложения, где выборка цветов с изображений полезна.
Цвета продуктов и брендов
Сайты электронной коммерции могут извлекать основные цвета из фотографий продуктов, чтобы предлагать связанные элементы в этой цветовой палитре. Или показывать выбор образцов цветов на страницах продуктов.
Бренды также могут создавать цветовую палитру из своих логотипов и изображений продуктов для создания руководств по стилю и активов брендинга.
Извлечение фонового цвета
Такие приложения, как удаление фона, могут анализировать изображение для определения цветов переднего плана и фона. Это позволяет извлекать и удалять фон чисто.
Доминирующие цвета сцены
Аналитика для понимания изображений и видео часто рассматривает доминирующие цвета как признак. Цвета сцены дают подсказки о сеттинге, ландшафте, эмоциях, жанре и т. д.
Модели компьютерного зрения могут извлекать основные цвета из изображения для классификации и индексации поиска.
Создание цветовой палитры
Художники и дизайнеры могут выбирать цвета из эталонных изображений, чтобы вдохновляться цветовыми схемами для цифрового искусства, веб-страниц, пользовательских интерфейсов и т. д. Извлечение палитры из фотографий является отправной точкой.
Инструменты дизайна, такие как Adobe Capture CC, имеют автоматизированные функции для создания пяти цветовых палитр из изображений.
Дополненная реальность
Опыты дополненной реальности могут считывать цвета из реальных сцен, чтобы применять эффекты и наложения, соответствующие окружающей среде. Например, привязка виртуальных объектов к физическим поверхностям с похожими цветами.
Сжатие изображений
Некоторые методы сжатия изображений, такие как PNG, уменьшают размер файла за счет объединения цветов, используемых по всему изображению. Анализ цветов пикселей помогает оптимизировать и сократить палитру для файлов меньшего размера.
При выборке цветов из изображений следует учитывать некоторые проблемы:
– Шум изображения может исказить результаты алгоритмов, которые смотрят на частоты пикселей.
– Светлые участки и тени могут исказить анализ в цветовом пространстве RGB.
– Сложные текстуры, градиенты и узоры трудно количественно выразить в цветах.
– Артефакты и сжатие JPEG могут привести к появлению цветовых полос.
– Потребительские камеры не соответствуют человеческому зрению или не печатают цвета идеально.
Предварительная обработка и преобразование в менее коррелированные цветовые пространства помогают преодолеть некоторые из этих ограничений. Однако для достижения оптимального качества по-прежнему требуется корректировка алгоритмов и использование человеческого суждения.
Для изображений продуктов и компьютерного зрения дополнительное контролируемое освещение при съемке изображений улучшает результаты. В загруженных пользователями изображениях сложнее учитывать отклонения.
Вот некоторые программные библиотеки и инструменты, которые обеспечивают анализ цвета и выборку из изображений:
– Pillow и OpenCV в Python
– Pixels.js и Color Thief для JavaScript
– Paletton и Adobe Color для цветовых палитр
– ImageColorPicker для инструментов выборки
– Swatches и Pic2Polor для мобильных приложений
– kmeans и scikit-learn для кластеризации
Многие приложения для редактирования фотографий также включают в себя инструменты «пипетка», цветовые гистограммы и анализ палитры.
Онлайн-API, такие как Unscreen и Cloudinary, предоставляют извлечение цвета из изображений как услугу.
Программная выборка цветов из изображений открывает множество полезных приложений в дизайне, компьютерном зрении, электронной коммерции, брендинге и не только.
Хотя это и кажется простым, надежное извлечение цветов требует учета обработки изображений, цветовых пространств, кластеризации и методов выборки.
Большинство языков программирования предоставляют библиотеки обработки изображений для загрузки буферов пикселей и манипулирования данными о цвете. Сканирование пикселей, кластеризация и выборка из областей дают репрезентативные цвета из изображения.
Преобразование RGB в более релевантные с точки зрения восприятия пространства, такие как HSV или LAB, улучшает результаты перед выборкой. А выбор параметров на основе вариантов использования обеспечивает баланс производительности и качества.
При тщательной реализации извлечение цветов из изображений может обеспечить автоматизацию и новые возможности во многих областях. Взрыв компьютерного зрения и графики продолжает продвигать технологии вперед.
| Метод | Описание | Преимущества | Недостатки |
|---|---|---|---|
| Подсчет частот | Квантование и подсчет цветов пикселей | Простота, определяет доминирующие цвета | Подвержен шуму, пропускает нюансы |
| Выборка областей | Выбор пикселей из таких областей, как центр, края, случайным образом | Лучше для определенных приложений | Можно пропускать доминирующие цвета |
| Кластеризация методом k-средних | Неконтролируемые группы машинного обучения пиксели в кластеры | Систематически уменьшает цвета | Требует настройки, более продвинутый |
| Преобразует цветовое пространство | RGB в HSV, LAB и т. д. перед выборкой | Лучше моделирует человеческое восприятие | Добавляет вычисления |
В этой таблице обобщены основные методы, обсуждаемые для выборки цветов из изображений, а также их относительные плюсы и минусы. Подсчет частот прост, но может быть шумным. Выборка дает пользователю контроль, но может пропускать доминанты. K-Means систематически уплотняет, но требует настройки. А преобразования цветового пространства помогают восприятию за счет вычислений.
Оптимальный подход зависит от конкретных потребностей и ограничений вашего приложения. Во многих случаях наилучшие результаты дает гибридное решение с несколькими методами.
- Библиотека изображений PIL/Pillow Python: https://pillow.readthedocs.io
- Обработка изображений Pixel.js JavaScript: https://pixeljs.com
- Кластеризация K-средств — введение: https://home.deib.polimi.it/matteucc/Clustering/tutorial_html/kmeans.html
- Цветовые пространства в обработке изображений: https://www.cambridgeincolour.com/tutorials/color-spaces.htm
- Инструмент выбора цвета изображения: https://image-color.com
- Цветовые палитры Adobe Capture CC: https://helpx.adobe.com/mobile-apps/help/capture-create-color-theme-image.html