愿所有的美好和期待都能如约而至

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

发布时间:  来源:互联网  作者:匿名  标签:css error Mimic Photoshop RGB levels with CSS and SVG filter exception html IT资讯  热度:37.5℃

本文介绍了使用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级别的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP