如何分离具有Alpha通道的图像和特定的背景颜色？

Question

最近同事给了我一个效果视频，让我把它渲染到网站上作为效果。 我的解决方案是将其渲染在画布上。但我无法将效果与黑色背景分开，因为之前具有 Alpha 通道的像素现在已经与背景像素混合了。

可能吗？我应该使用什么算法来实现这样的目标？

Answer 1

我不确定我是否正确理解你的问题，但从我收集的情况来看，你正在尝试渲染透明视频作为效果。这是正确的吗？

如果是这样，那么您正在寻找的是 VP9/H.265/HEVC 视频编解码器。您想要做的是创建一个具有两个源的视频元素：一个源用于 macOS/iOS(Safari)，具有 H.265/HEVC 视频，另一个源具有用于 Windows/Android（Chrome/Mozilla/等）的 VP9 视频。

视频元素将如下所示：

<video autoplay loop muted playsinline disablepictureinpicture>
  <source type='video/webm' src='video.webm'>
  <source type='video/mp4; codecs="hvc1"' src='video.mp4'>
</video>

然后你就可以用它做任何你想做的事情。例如，您可以将其放置在物体上作为效果。另一件需要考虑的事情是所使用的视频编解码器是否确实支持透明度。请记住，H.264 不支持透明度，这是 mp4 文件最常用的编解码器。