使用CSS和SVG滤镜模拟Photoshop RGB级别

2022-09-04 00:00:00 svg html css photoshop svg-filters

我以前也这样做过，我知道它的存在，但由于某种原因，我现在找不到它(浪费了几个小时，但没有成功)。

我要通过CSS模拟PhotoshopRGB级别。

在下图中，我将中间值从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]

这是另一个问题的一部分。要求使用SVGfilter标记。

解决方案

要从PhotoShop中完全复制RGB级别功能，您需要三个滤镜组件：一个feComponentTransfer/Gamma和两个feComponentTransfer/Tables。如果您只是如上所述调整中间轴的值，则只需要第一个feComponentTransfer。要阅读有关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>

相关文章