SVG Sepia 滤镜效果：仅中间色调

Question

请问如何使用SVG实现以下链接中使用Photoshop的Color Balance制作的棕褐色调效果？

我的使用Photoshop的Color Balance制作的棕褐色调

我尝试了以下代码：

<svg class="defs-only">
  <filter id="monochrome" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%">
    <feColorMatrix type="matrix"
      values="1.00 0 0 0  0 
              0.80 0 0 0  0  
              0.65 0 0 0  0 
                0  0 0 1  0" />
  </filter>
</svg>

CSS：

img{
    -webkit-filter: url(#monochrome);
    filter:  url(#monochrome);
}

但是我得到的色调复古效果与Photoshop上只影响中间色调的效果非常不同。

注意：我不能使用canvas。

- João Silva

---

你在这里使用的UA是什么？ - Robert Longson

我正在使用Google Chrome作为用户代理。 - João Silva

Answer 1

首先，那不是一个合适的棕褐色滤镜。它只使用红色通道作为输入，因此你从一开始就失去了约三分之一的亮度。"官方" W3C 棕褐色滤镜是：

   <feColorMatrix type="matrix"
  values="0.39 0.769 0.189 0  0 
          0.349 0.686 0.168 0  0  
          0.272 0.534 0.131 0  0 
            0  0 0 1  0" />

这将给你以下结果：

如果你只想处理中间色调，那么你需要将中间色调分离并单独处理。过程如下所示：

<filter id="mid-sepia" color-interpolation-filters="sRGB">
  <feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer >
    <feFuncA type="table" tableValues="0 .2 0.5 1 1 1 0.5 .2 0"/>
  </feComponentTransfer>
 <feComposite operator="in" in="SourceGraphic"/>
   <feColorMatrix type="matrix" result="sepia-clip"
  values="0.39 0.769 0.189 0  0 
          0.349 0.686 0.168 0  0  
          0.272 0.534 0.131 0  0 
            0  0 0 1  0" />

  <feColorMatrix in="SourceGraphic" type="matrix" result="gscale"
                values="0.2126 0.7152 0.0722 0 0 
                        0.2126 0.7152 0.0722 0 0 
                        0.2126 0.7152 0.0722 0 0 
                        0 0 0 1 0" />
  <feComposite operator="over" in="sepia-clip" in2="gscale"/>
</filter>

并给你类似于这样的东西：

这里的魔法在于feFuncA的设置-它控制中间色调选择的宽度。 "0 .2 0.5 1 1 1 0.5 .2 0"是一个相当宽的选择-因此，如果您想要给棕褐色处理提供较窄的范围，则可能需要使用类似于 "0 0 0 0.2 0.5 1 0.5 0.2 0 0 0"的内容-尝试一下，直到您有喜欢的东西。

http://codepen.io/mullany/pen/rjdYre?editors=1000#

- Michael Mullany

Answer 2

我不知道你是否看到了这个，但是有一个 feColorMatrix 生成器存在：https://codepen.io/mullany/pen/qJCDk

你只需要用你自己的图片替换它：

<image x="0" y="0" width="590" height="400" filter="url(#f1)" xlink:href="[YOUR IMAGE]"/>

您可以像在Photoshop中一样玩弄所有参数。 享受吧 (ﾉ≧∀≦)ﾉ

- Emeline Esteves

---

问题在于，由feColorMatrix进行的颜色更改应用于所有音调...而不仅仅是像我最初所述的中间音调，就像Photoshop一样。 - João Silva

可能是因为网络颜色受到了限制。 - Emeline Esteves