Javascript 使用canvas/svg的视频背景透明

我正在尝试将视频背景更改为透明。我有红色和使用的解决方案，但他们不太会与我使用的视频

我使用的解决方案是 1) (二)

这两种解决方案都可以很好地与他们的演示视频配合使用，但与我使用的视频不配合

如果有人能解释它是如何工作的。也许我能解决这个问题

这是我得到的结果

---

使用的方法有几种。最好的效果是在视频的下半部分添加一个预计算的掩码（在后期制作期间完成）。然后将视频渲染到画布上，通过获取像素数据并将a颜色通道移动到alpha通道，将两半组合起来创建透明帧

这个过程是非常CPU（Javascript）密集型的，只适用于低分辨率视频。此外，您还需要创建动画遮罩，并将视频大小增加一倍。如果您在标准播放器中查看第二个示例，您将看到另一半

第一个示例使用的第二种方法是动态计算alpha。这甚至更需要CPU，但非常简单。同样，如果你有低分辨率的视频和一个快速的设备，这是切实可行的。然后，您将面临设置透明度阈值的问题，因为视频使用有损压缩，您将在边缘和阈值颜色方面遇到问题

最好的选择是使用WebGL解决方案（如果您不想在后期制作中使用），并在GPU上进行掩蔽，在GPU上可以使用更复杂的算法和一些按时间顺序进行的过滤。尽管这取决于视频质量，但背景类型（单色或静态背景）。您还可以找到一个更有效的asm.js解决方案。我记得不久前见过一个，如果我能找到它，我会提供链接

---

不幸的是，JavaScript目前还不能实时处理高质量的哑光效果。这是一个遗憾，因为2D API只需要一个额外的全局合成操作，“色度alpha”（将平均源RGB移动到目标alpha），这将打开如此多的附加画布效果（我祈祷哪一个上帝会实现这一点？）。现在你必须移动javascript中的每个像素

谢谢你的回答。我现在将寻找webGL解决方案。我只是想知道第二种方法到底发生了什么。我很想知道它是如何工作的。它们将整个视频渲染到画布上，然后使用

ctx.getImageData

获取视频的像素数据。然后将像素从下半部分移动到上半部分的alpha通道。然后，屏幕只显示上半部分。他们使用与第一个示例相同的方法。这是第二个视频的链接，因此您可以看到包含下半部分遮罩的完整视频。