Javascript 如何去除视频的绿色背景，使其透明？

我有一个绿色的背景。我想删除这个绿色部分（），使其透明，然后在网站背景上显示视频

---

我只能找到使用图像的复杂代码。

开始信息：视频元素可以是html5画布的图像源。这意味着一帧视频可以绘制到画布上（并由画布操纵）

概述：context.getImageData方法将以数组形式获取画布的RGBA像素数据。修改数组的像素数据后，

context.putImageData

将把修改后的像素放回画布上

计划使用CSS在站点背景上定位html5画布。使用该画布在站点上绘制视频帧（绿色视频像素变为透明，以便站点背景显示）

（您需要一些组装和学习）：

定位覆盖网站背景的html5画布元素

在时间循环内（

requestAnimationFrame

）：

清除画布：

context.clearRect

在画布上绘制视频帧：

context.drawImage（视频，0,0）

,

从画布获取像素数据：

context.getImageData

---

检查每个像素的“绿色度”：

if（绿色>220&&redIt）是可能的。您可以在画布中绘制视频，并将绘制的像素操纵到它的位置。以下是教程（画布内的视频渲染，每像素图像操纵）->@markeE但如何定义颜色范围（例如，对于蓝色背景，我尝试在谷歌上搜索，但没有成功：）@Motoo只需调整第4步，检查你自己的“蓝色”。虽然我不知道您的用例是什么，但您可以从
recpersonal开始，下面使用较大/较小值的方法对我根本不起作用，使用它非常危险。因为即使在非常低的值下也会出现相对较好的绿色值，但也会出现其他类型的色调。这种方法对我来说效果更好，但仍然很糟糕。没有比这更准确的吗？我认为HSL格式可能会帮助更多。危险的