Question

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

我想通过RGB模仿CSS <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">  <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" />  </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>级别。

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

enter image description here

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

我已尝试使用以下代码：

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

Photoshop

在CSS中，我通常会从1更改为不同的值，例如：0.75,0.5等。我想以某种方式模仿SVG。我记得我使用的代码与上面的代码非常相似，唯一需要更改的是替换代码。

[编辑1]

这是另一个问题的一部分。要求使用filter {{1}}标记。

Answer 1

您基本上是在这里更新图像的灰度系数。 SVG中有一个内置的过滤器组件来做到这一点。

<feComponentTransfer type="gamma" ...>

见下面的演示。

注意：过滤器在Chrome上无法正常更新，因此请尝试使用Firefox进行此演示

＆＃13;

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);

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

要从Photoshop完全复制RGB级别功能，您需要三个滤镜组件：feComponentTransfer / gamma和两个feComponentTransfer / tables。如果您只是如上所述调整中间轴值，则只需要第一个feComponentTranfer。要了解有关ComponentTransfer如何工作的更多信息，请参阅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>

使用CSS和SVG过滤器模仿Photoshop RGB级别

2 个答案: