如何将没有 Alpha 通道的图像与特定背景颜色分开？ [已关闭]

Question

最近同事给了我一个效果视频，让我把它渲染到网站上作为效果。

我的解决方案是在画布上渲染它，但我无法将效果与黑色背景分开，因为之前具有 Alpha 通道的像素现在已经与背景像素混合（Alpha 丢失）。

是否可以将上面的图像混合到背景上？我应该使用什么算法来实现这样的目标（其中黑色是最透明的颜色，蓝色是最明显的）？

视频中的示例帧：

Answer 1

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

如果是这样，那么您正在寻找的是 VP9/HEVC(H.265) 视频。您想要做的是创建一个具有两个源的视频元素：一个源用于 macOS/iOS(Safari)，具有 HEVC(H.265) 视频，另一个源具有用于 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 文件最常用的一种。