将黑白视频转换为白色和 1 色

Question

问题：我们有一个视频，用于帮助打造我们的网站品牌。这是一个简单的视频，只是由改变其照度的形状图案组成。我们已经能够将其转换为黑白，并希望从此视频中我们可以将其更改为蓝色和白色，例如红色和白色。因为我们有不同的应用程序，它们将具有相同的图案视频但具有不同的颜色。我希望有一种方法可以在CSS过滤器中做到这一点。如果有另一种方法可以做到这一点，我全是耳朵，理想情况下这将是自动化的，因为不需要有人打开一些软件并加载视频并在那里编辑它。

Answer 1

有一个Q/A，它很好地解释了如何使用内置的CSS混合过滤器从一种颜色更改为另一种颜色。
但不幸的是，这些也会影响您的白色像素。

因此，要做到这一点，您需要一个比CSS规范提出的内置过滤器更智能的过滤器：SVG过滤器。

可能有很多不同的方法可以做到这一点，但我会尽量在这里保持简单，并在最大的内置范围内使用。

feColorMatrix[type="luminanceToAlpha"]允许我们根据传入的源图形的亮度创建 alpha 混合。
这与我们想要的完全相反：它将所有白色像素转换为透明像素。

因此，我们必须在过滤器中添加一个小的合成操作，以便只保留这些白色像素。

现在我们有一个透明的视频，只涂有发光像素(如果是真正的黑白，只有白色(。
因此，我们所要做的就是设置我们选择的背景颜色，所有黑色现在都将设置为这种颜色。但是，由于过滤器会影响<video>元素，我们需要将其包装在容器元素中，该元素不会受到此过滤器的影响。

// since filter affects the whole <video> element,
// we set the replacing color as the background color of a wrapping element
col.oninput = e => wrapper.style.backgroundColor = col.value;

#vid {
filter: brightness(250%) url('#darkToAlpha');
width: 100%;
}
#wrapper {
margin: 0;
padding: 0;
display: inline-block;
line-height: 0;
background: black; /* :P */
}

<label>Select a color: <input type="color" id="col"></label>
<p id="wrapper">
<video id="vid" controls muted src="https://upload.wikimedia.org/wikipedia/commons/6/64/Plan_9_from_Outer_Space_%281959%29.webm#t=56:13"></video>
</p>
<svg width="100%" height="100%">
<filter id="darkToAlpha">
<!-- this  makes luminance transparent -->
<feColorMatrix in="SourceGraphic"
type="luminanceToAlpha" result="lum"/>
<!-- so invert it using compositing -->
<feComposite in="SourceGraphic" in2="lum" operator="in"/>
</filter>
</svg>

请注意，它不适用于灰度图像，luminanceToAlpha 的范围有点太宽，这就是为什么我还添加了brightness()滤镜的原因。