Алгоритм Photoshop использует для сопоставления цветов на изображениях - PullRequest
1 голос
/ 13 мая 2019

Я задал этот вопрос о "Как нормализовать цвета набора произвольных изображений в согласованный, похожий на Instagram отфильтрованный вид".

У меня естьтысячи изображений, скажем, разных типов, в основном как то, что вы найдете в Википедии.Они все JPG, хотя.Некоторые из них имеют сплошной светлый или темный фон с рисунком сверху (например, человек на черном фоне, или животное на белом фоне, или зеленый фон и т. Д.).Некоторые из них похожи на сцену из цветов, трав и деревьев, поэтому очень сложная цветовая аранжировка (т.е. не простой сплошной цвет).У некоторых из них уже есть намеки на фильтр (будь то «винтажный» вид, «холодная температура», «теплый» или высококонтрастный HDR).

Мне интересно, какие у меня варианты?придание общему дизайну сетки изображений ощущения полностью интегрированным в окружающий дизайн веб-интерфейса Flat UI, и поэтому изображения, возможно, имеют оттенок одного из акцентных или не акцентных цветов, и все изображения имеют одинаковый общийтемпература / насыщенность / контраст / и т.д..Интересно, можно ли это сделать?

Я представляю, как бы я выяснил, как это сделать, используя библиотеку цветов в JavaScript вместо того, чтобы просматривать каждое изображение вручную и настраивать ползунки.Я хочу, чтобы это было как-то автоматически, если это вообще возможно.То есть я каким-то образом пишу некоторый код, который определяет стиль «базовых линий» для изображений, затем сравнивает каждое изображение с этим стилем и корректирует его в соответствии с соответствующим количеством.Хотите знать, (а) возможно ли это, и (2) (если не слишком много, чтобы спросить), можете ли вы указать мне правильное направление, как начать.

В конце концов, всеИзображения будут иметь примерно одинаковую цветовую палитру, примерно такой же общий эффект фильтра.

Интересно, как это сделает фотошоп.Если не так, как они это делают точно (не нужно знать точный алгоритм), интересно, что такое общий алгоритм, который может решить эту проблему в JavaScript.Я действительно не знаю, с чего начать.

1 Ответ

0 голосов
/ 13 мая 2019

Используйте фильтры CSS. Дайте вашим изображениям класс и выберите их по классу.

https://www.w3schools.com/cssref/css3_pr_filter.asp

.blur {
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

.brightness {
  -webkit-filter: brightness(0.30);
  filter: brightness(0.30);
}

.contrast {
  -webkit-filter: contrast(180%);
  filter: contrast(180%);
}

.grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.huerotate {
  -webkit-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}

.invert {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.opacity {
  -webkit-filter: opacity(50%);
  filter: opacity(50%);
}

.saturate {
  -webkit-filter: saturate(7);
  filter: saturate(7);
}

.sepia {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.shadow {
  -webkit-filter: drop-shadow(8px 8px 10px green);
  filter: drop-shadow(8px 8px 10px green);
}
.inverted{
  -webkit-filter: invert(100%); /* Safari */
  filter: invert(100%);
}

Фрагмент кода:

...