Я ищу алгоритм или код для поиска похожих пикселей (пикселей с похожими цветами) на стороне клиента и изменения цвета только этих пикселей. Я много искал, но не смог найти формулы для поиска похожих пикселей. То, что я хочу сделать, похоже на инструмент «Волшебная палочка» в Photoshop. Таким образом, с помощью этого инструмента мы можем раскрасить некоторые части продукта, чтобы создать собственный цвет. Также у нас есть некоторые ограничения по цвету в производстве, и мы можем использовать только некоторые цвета. Я попытался найти логику с некоторой формулой, например: найти евклидово расстояние каждого пикселя по сравнению с соседними пикселями с холстом и java-скриптом и сравнить количество. Но это плохо работает. Слабость заключается в том, что на каждом изображении есть пиксели с похожими цветами, но разными цветовыми оттенками. Этот алгоритм не очень умен в поиске различных цветовых оттенков. Но в Photoshop мы можем выбрать область того же цвета с помощью инструмента «Волшебная палочка», а затем расширить эту область до аналогичных цветовых оттенков с помощью опции «похожие».
Измените цвет похожих пикселей на изображении с помощью холста и js
Ответы (2)
Что у вас есть до сих пор? Было бы полезно, если бы вы поделились соответствующим кодом, который вы написали до сих пор (например, для поиска по пикселям, сравнения цветов пикселей...)
Если вы еще этого не сделали, вы можете ознакомиться с алгоритмами заполнения. Это будет основой вашего алгоритма обхода.
Сравнение цветов, насколько я понимаю, не совсем решаемая задача. Измерение трехмерного евклидова расстояния — неплохая идея и простое в реализации решение. В этой статье предлагается «[вычисление] абсолютной разницы между каждым компонентом выбранного цвета и текущим цветом. Мы говорим, что разница между двумя цветами — это самая большая разница между отдельными цветовыми компонентами».
Однако люди не воспринимают цветовые различия как различия в красных, зеленых и синих чертах.
Еще одна страница, которую вам было бы интересно прочитать: Как сравнить два цвета на предмет сходства/различия. Один из ответов на этот вопрос предлагает вычислить значения HSL цвета, а затем использовать формулу: avghue = (color1.hue + color2.hue)/2 Distance = Abs(color1.hue-avghue)
Если вы хотите углубиться в теорию цвета, Delta-E может предоставить вам некоторые понимание цветовых различий.
Ваше решение может состоять в том, чтобы позволить вашим пользователям взмахнуть волшебной палочкой!
Итак, вместо того, чтобы выбирать 1 цвет, щелкая волшебной палочкой, как насчет того, чтобы позволить пользователю перетаскивать волшебную палочку по нескольким пикселям.
Накапливайте любые уникальные цвета, которые пользователь перетаскивает.
Затем выполните изменение цвета на основе этой накопленной группы цветов, а не одного цвета.
Да, это не так автоматически, как настройка допуска волшебной палочки в Photoshop, но замена человеческого глаза/мозга не может быть такой уж плохой!
@Остин прав в отношении теории цвета и человеческого глаза, который плохо координирует свои действия. Евклидов метод будет выполнять математическое сопоставление цветов... но человеческий глаз очень разборчив в том, как он воспринимает цвет.
Вы упомянули "разные цветовые оттенки"...
Вы можете представить свои изображения в цветовом формате HSL, чтобы упростить сравнение цветов.
Вместо смешивания цветов (как это делает rgb) HSL разбивает цвета на Hue (цвет), Saturation (глубина) и Lightness (ну, легкость).
В HSL все оттенки (цвета) арифметически сгруппированы вместе, поэтому вы можете запросить все синие цвета из указанного синего плюс 10 ближайших синих оттенков.
