如何应用 feBlend 并保留源 alpha答案

【问题标题】：How to apply feBlend and preserve source alpha如何应用 feBlend 并保留源 alpha
【发布时间】：2018-05-23 13:02:50
【问题描述】：

我正在尝试通过在“变亮”和“变暗”模式下应用 feFlood 和 feBlend 来修改图像的颜色。如何保留 Alpha 通道？

<svg>
  <filter id="filter">
    <feFlood result="flood" flood-color="blue" />
    <feBlend in="SourceGraphic" in2="flood" mode="lighten" />
  </filter>
  <image filter="url(#filter)" href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</svg>

https://jsfiddle.net/utqghr0o/

【问题讨论】：

标签： svg svg-filters

【解决方案1】：

lighten 的工作方式是它从两个输入中的每一个的每个通道中获取最大颜色值（与 alpha 相乘）。因此，如果一个像素的不透明度为零，则它永远不会算作任何通道的最大颜色，而是会使用来自另一个输入的值。

您需要做的是首先使用源图像（“SourceAlpha”）中的 Alpha 遮罩泛洪，然后将遮罩的泛洪与原始图像混合。

<svg width="544" height="184">
  <filter id="filter">
    <feFlood result="flood" flood-color="blue" />
    <feComposite in="flood" in2="SourceAlpha" operator="atop" result="maskedflood"/>
    <feBlend in="SourceGraphic" in2="maskedflood" mode="lighten" />
  </filter>
  <image filter="url(#filter)" width="544" height="184" href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</svg>

【讨论】：

【解决方案2】：

我认为保罗的回答很接近，但并不完全正确。

feBlend 公式为：

Opacity of Final Pixel  = 1 - (1- Opacity of Image A Pixel)*(1- Opacity of Image B Pixel)

如果你先做蒙版然后混合，最终的不透明度会有点偏离。例如，对于图像 A 中不透明度为 0.6 的像素，最终的像素不透明度 = 1 - (.6 * .6) = .64

接近但不等于 0.6。

如果您想在最终图像中保留图像 A 的确切不透明度 - 您需要先进行混合，然后再进行蒙版。这是假设您希望在预乘的“100% 不透明等效”颜色上进行变亮，这通常是这种情况。

<svg width="544" height="184">
  <filter id="filter">
    <feFlood result="flood" flood-color="blue" />

    <feBlend in="SourceGraphic" in2="flood" mode="lighten" result="blend"/>
    <feComposite in="blend" in2="SourceAlpha" operator="atop" result="maskedflood"/>
  </filter>
  <image filter="url(#filter)" width="544" height="184" href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</svg>

【讨论】：