使用CSS和SVG滤镜模拟Photoshop RGB级别 [英] Mimic Photoshop RGB levels with CSS and SVG filter
本文介绍了使用CSS和SVG滤镜模拟Photoshop RGB级别的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我以前也这样做过，我知道它的存在，但由于某种原因，我现在找不到它(浪费了几个小时，但没有成功)。
我要通过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>
这篇关于使用CSS和SVG滤镜模拟Photoshop RGB级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
