Question

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

Answer 1

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

因此，您需要一个比CSS规范建议的内置过滤器（SVG过滤器）更聪明的过滤器。

可能有很多不同的方法可以做到这一点，但我将在这里尽量简化并使用最大的内置函数。

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

因此我们必须在滤镜中添加一个小的compositing operation，以便仅保留这些白色像素。

现在我们有一个透明的视频，只绘制了发光像素（如果是真正的黑白，则只有白色）。
因此，我们要做的就是设置我们选择的背景颜色，所有黑色的东西现在都将设置为该颜色。但是，由于过滤器会影响<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>

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

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

1 个答案: