算法Photoshop用来匹配图像上的颜色

Question

我已经问了这个问题："如何将一组任意图像的颜色正常化为一致的，类似Instagram的过滤外观"。

我有一千张图像，例如所有不同类型的图像，基本上就像您在Wikipedia上找到的一样。他们都是JPG。他们中的一些人具有固体光或黑暗的背景，顶部有一个图形(例如在黑色背景上的人，白色背景或绿色背景等(。其中一些就像是花朵，草和树木的场景，如此复杂的颜色布置(即，不是简单的纯色(。他们中的一些人已经有一个示一些过滤器的暗示(无论是"老式"外观，"凉爽温度"，"温暖"或高对比度HDR外观(。

我想知道我的选择是使图像网格的整体设计完全集成到网站周围的UI设计中，因此这些图像也许有一种重音颜色或非颜色的暗示 - 颜色和所有图像具有相同的整体温度/饱和度/对比度/等。想知道是否可以这样做。

我想像一下，我会使用JavaScript中的颜色库来弄清楚如何做到这一点，而不是手动浏览每个图像并调整滑块。如果可能的话，我希望它以某种方式自动。也就是说，我以某种方式编写了一些代码，这些代码为图像描述了"基线"样式，然后将每个图像与该样式进行比较并调整适当的数量以匹配。想知道(a(是否可以，以及(2((如果不是太多要问(，您是否可以指向我的正确方向。

最后，所有图像都将大致具有相同的调色板，相同的整体过滤效果。

想知道Photoshop是如何做到这一点的。如果不是他们如何做到这一点(不需要知道确切的算法(，想知道什么是一种可以在JavaScript中解决此问题的一般算法。我真的不知道从哪里开始。

Answer 1

使用CSS过滤器。给您的图像上课，然后按课堂选择。

https://www.w3schools.com/cssref/csss3_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" />