javascript - Photoshop 用于匹配图像颜色的算法

Question

我问过this关于“如何将一组任意图像的颜色规范化为一致的、类似 Instagram 的过滤外观”的问题。

I have a thousand images let's say, of all different types, basically like what you would find on Wikipedia. They are all JPGs though. Some of them have a solid light or dark background with a figure on top (like a person on a black background, or an animal on a white background, or a green background, etc.). Some of them are like a scene of flowers and grasses and trees, so highly complicated color arrangement (i.e. not a simple solid color). Some of them already have a hint of a filter on them (whether it's "vintage" look or "cool temperature" or "warm" or high contrast HDR look).

I'm wondering what my options are for making the overall design of a grid of images feel fully integrated into the surrounding Flat UI design of the website, and so the images have perhaps a hint of one of the accent colors or non-accent colors, and all the images have the same overall temperature/saturation/contrast/etc. Wondering if it's possible to do this.

I am imagining I would figure out how to do this using a color library in JavaScript rather than going through each image manually and adjusting the sliders. I want it to be automatic somehow, if at all possible. That is, I somehow write some code that figures out a "baseline" style for the images, then compares each image to that style and adjusts it the appropriate amount to match. Wondering (a) if this is even possible, and (2) (if it's not too much to ask) if you could point me in the right direction on how to get started.

In the end, all of the images would have the same color palette roughly, same overall filter effect look.

想知道 photoshop 是如何做到这一点的。如果不是他们完全是怎么做的(不需要知道确切的算法)，想知道可以在 JavaScript 中解决这个问题的通用算法是什么。我真的不知道从哪里开始。

Answer 1

使用 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%);
}

代码片段:

.imgFilter {
  -webkit-filter: sepia(45%);
  filter: sepia(45%);

}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Oryctolagus_cuniculus_Tasmania_2.jpg/220px-Oryctolagus_cuniculus_Tasmania_2.jpg" />

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Oryctolagus_cuniculus_Tasmania_2.jpg/220px-Oryctolagus_cuniculus_Tasmania_2.jpg" class="imgFilter" />