使用 CSS 和 SVG 过滤器模拟 Photoshop RGB 级别答案

【问题标题】：Mimic Photoshop RGB levels with CSS and SVG filter使用 CSS 和 SVG 过滤器模拟 Photoshop RGB 级别
【发布时间】：2017-09-03 05:50:26
【问题描述】：

我过去做过这个，我知道它存在，但由于某种原因我现在找不到它（浪费了几个小时没有成功）。

我想通过CSS 模拟Photoshop RGB 关卡。

在下图中，我将中间值从 1 更改为 0.5。

我想用 CSS 获得相同的效果（或至少尽可能接近）。

我已尝试使用以下代码：https://jsfiddle.net/txwu3so5/

我需要找到一些替换代码来获得这种效果。实际代码会影响白色（我不希望这样）。

<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.img_02 {
    filter: url(#level-50); 
}
</style>
</head>

<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position:absolute;height:0;">
    <defs>
        <filter id="level-50" x="0" y="0">
            <!-- begin of code to replace -->
            <feColorMatrix type="matrix" values="
                0.5 0 0 0 0
                0 0.5 0 0 0
                0 0 0.5 0 0
                0 0   0 1 0"
            />
            <!-- end of code to replace -->
        </filter>
    </defs>
</svg>

<img class="img_01" src="https://image.ibb.co/kzz41Q/image.png" />
<br /><br />
<img class="img_02" src="https://image.ibb.co/kzz41Q/image.png" />

</body>

</html>

在Photoshop 中，我通常从 1 更改为不同的值，例如：0.75、0.5 等。我想用CSS 以某种方式模仿这一点。我记得我用了一个和上面很相似的代码，唯一需要改变的是替换代码。

[编辑 1]

这是另一个问题的一部分。必须使用SVG filter 标签。

【问题讨论】：

hue-rotate(90deg) 是 filter 属性的有效 CSS 值。您不需要 SVG。
反正我不需要色相旋转。我需要的是亮度级别更改（不完全一样，但类似），但修改不能影响白色和黑色，就像 Photoshop 级别一样。
啊，我明白了。你可能需要计算一个颜色矩阵......天哪，这不会很有趣 XD
我认为过去我使用了一种比颜色矩阵更简单的解决方案，但这也适用于我。

标签： html css svg photoshop svg-filters

【解决方案1】：

您基本上是在此处更新图像的伽玛值。 SVG 中有一个内置的过滤器组件可以做到这一点。

<feComponentTransfer type="gamma" ...>

请看下面的演示。

注意：过滤器无法在 Chrome 上正确更新，因此请改用 Firefox 试试这个演示

var slider = document.getElementById("slider");
var gamma = document.getElementById("gamma");
var gammaR = document.getElementById("gammaR");
var gammaG = document.getElementById("gammaG");
var gammaB = document.getElementById("gammaB");

slider.addEventListener("input", function(evt) {

  var sliderValue = evt.target.value;
  gamma.textContent = sliderValue;
  gammaR.setAttribute("exponent", sliderValue);
  gammaG.setAttribute("exponent", sliderValue);
  gammaB.setAttribute("exponent", sliderValue);

});

.img_02 {
    filter: url(#level-50); 
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position:absolute;height:0;">
    <defs>
        <filter id="level-50" x="0" y="0">
            <!-- begin of code to replace -->
            <feComponentTransfer>
                <feFuncR type="gamma" exponent="2.2" id="gammaR"/>
                <feFuncG type="gamma" exponent="2.2" id="gammaG"/>
                <feFuncB type="gamma" exponent="2.2" id="gammaB"/>
            </feComponentTransfer>
            <!-- end of code to replace -->
        </filter>
    </defs>
</svg>

<img class="img_01" src="https://image.ibb.co/kzz41Q/image.png" />
<img class="img_02" src="https://image.ibb.co/kzz41Q/image.png" />

<br/>
<input id="slider" type="range" min="0" max="4" step="0.1" value="1"/>
<p id="gamma"></p>

【讨论】：

【解决方案2】：

要完全复制 Photoshop 的 RGB 级别功能，您需要三个滤镜组件：一个 feComponentTransfer/gamma 和两个 feComponentTransfer/tables。如果您只是如上所述调整中间枢轴值，则只需要第一个 feComponentTranfer。要详细了解 ComponentTransfers 的工作原理 - 请参阅 webplatform docs（尽管它们已经开始有点腐烂了。

<filter id="RGBlevels" color-interpolation-filters="sRGB">

 <!-- set the value of the exponent to 1/[middle pivot input value] you'd use in Photoshop -->

  <feComponentTransfer>
      <feFuncR type="gamma" exponent="2"/>
      <feFuncG type="gamma" exponent="2"/>
      <feFuncB type="gamma" exponent="2"/>
  </feComponentTransfer>

 <!-- this primitive changes the start and end input values by specifying a new color curve. The values below, for example, set the start value to rgb(76.5,76.5,76.5) and the end value to rgb(204,204,204) -->

  <feComponentTransfer>
      <feFuncR type="table" tableValues="0 0 0 0 .2 .4 .6 .8 1 1 1"/>
      <feFuncG type="table" tableValues="0 0 0 0 .2 .4 .6 .8 1 1 1"/>
      <feFuncB type="table" tableValues="0 0 0 0 .2 .4 .6 .8 1 1 1"/>
  </feComponentTransfer>

 <!-- this primitive changes the output values to rgb(25.5,25.5, 25.5) <-> rgb(229.5,229.5,229.5) -->
  <feComponentTransfer>
      <feFuncR type="table" tableValues=".1 .9"/>
      <feFuncG type="table" tableValues=".1 .9"/>
      <feFuncB type="table" tableValues=".1 .9"/>
  </feComponentTransfer>
</filter>

【讨论】：

我测试了一段时间，第二个 feComponentTransfer 滤镜应该在 gamma 调整之前来匹配 Photoshop 产生的结果