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

Question

我有一个绿色背景的 视频。我想要移除这个绿色区域(色度键) ，使它成为透明的，并将视频显示在网站背景上。

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

- Programmer123

---

可以的。您可以在画布中绘制视频并操纵您所绘制的像素。这是教程（画布内视频渲染，逐像素图像处理）-> http://html5doctor.com/video-canvas-magic/ - Tomasz Kajtoch

Answer 1

起始信息： video element 可以作为 html5 画布的图像源。这意味着视频帧可以被绘制到（并且可以被）画布所操纵。

概述： context.getImageData 方法将在一个数组中获取画布的 RGBA 像素数据。修改数组的像素数据后，context.putImageData 将修改后的像素放回画布上。

一个计划： 使用 CSS 定位一个 html5 画布覆盖网站背景。使用该画布在网站上绘制视频帧（绿色视频像素透明，使得网站背景显示出来）。

（你需要进行一些组装和学习）:

定位一个 html5 画布元素，覆盖网站背景。

在一个时间循环内（requestAnimationFrame）：

1. 清除画布：context.clearRect，
2. 将视频帧绘制到画布上：context.drawImage(video,0,0)，
3. 从画布中获取像素数据：context.getImageData，
4. 检查每个像素是否为“绿色”：if(green>220 && red<20 && blue<20)，
5. 如果像素是绿色的，则使其透明：(alpha=0)，
6. 将修改后的像素放回画布上：context.putImageData，
7. 重复 #1 直到视频结束。

---

参考资料以帮助你学习

Stackoverflow 关于 #2 的先前帖子：Put the video tag on the Canvas tag

Stackoverflow 关于 #3-6 的先前帖子：Looping through pixels in an image

- markE

---

@markeE 但是如何定义颜色范围，例如背景使用蓝色，我尝试过谷歌搜索，但没有成功 :) - Motoo

@Motoo 只需调整第4步以检查您自己的“蓝色程度”。虽然我不知道您的用例是什么，但您可以从 rec<20＆＆green<20＆＆blue>220 开始。 :-) - markE

个人而言，使用更大/更小值的以下方法对我完全没有用，并且使用它非常危险。因为相对较好的绿色值甚至可以在非常低的值下出现，但其他类型的色调也可能出现。对我来说，这种方法 green > red + reverse_tolerance && green > blue + tolerance 效果更好，但仍然很差。难道没有更准确的方法吗？我认为 HSL 格式可能会更有帮助。 - Eksapsy

危险吗？ - ashleedawg