如何将 Photoshop 样式的颜色曲线滤镜应用于 HTML 标签？答案

【问题标题】：How to apply Photoshop-style color curves filters to an HTML tag?如何将 Photoshop 样式的颜色曲线滤镜应用于 HTML 标签？
【发布时间】：2022-01-11 04:03:21
【问题描述】：

我正在尝试在 HTML video 标记中复制以下 Photoshop 颜色曲线滤镜。

到目前为止，我找到的最接近的答案是如何添加 Photoshop-like color levels with CSS and SVG Filters，但这并不是我所需要的。

欢迎使用 CSS、SVG 过滤器甚至第三方库的任何方法！

【问题讨论】：

标签： html css colors curve svg-filters

【解决方案1】：

feComponentTransfer / table 是您实现颜色曲线的方式。该过滤器将 - 粗略地 - 产生该曲线组合，并且应该为您提供一个开始的地方。第一个 feComponentTransfer 实现了颜色曲线（我观察了这些值——你会想回去更仔细地做）。第二个实现白点调整。

我认为顺序是正确的，但我不是 Photoshop 专家，所以你可能必须先调整白点。

<filter id="color-curve" color-interpolation-filters="sRGB">
<feComponentTransfer>
  <feFuncR type="table" tableValues="0.0 0.22 0.4 0.6 0.4 0.8 0.86 0.92 0.96 0.98 1.0"/>
  <feFuncG type="table" tableValues="0.0 0.0 0.05 0.1 0.22 0.4 0.6 0.83 0.92 0.97 1.0"/>
  <feFuncB type="table" tableValues="0.1 0.8"/>
</feComponentTransfer>

<feComponentTransfer>
  <feFuncR type="table" tableValues="0.1 1"/>
  <feFuncG type="table" tableValues="0.1 1"/>
  <feFuncB type="table" tableValues="0.1 1"/>
</feComponentTransfer>
</filter>

我在此处链接的 feComponentTransfer 上编写了 webplatform 的文档：http://www.webplatform.org/docs/svg/elements/feComponentTransfer/

没有关于这个过滤器原语如何工作的更全面的指南，所以请仔细阅读。

【讨论】：