我有一个video https://youtu.be/-XfHJ57XIb4具有绿色背景。我想删除这个绿色部分（色度键 https://wikipedia.org/wiki/Chroma_key），使其透明，然后将视频显示在网站背景上。
我只能找到使用图像的复杂代码。
起始信息： The video element可以是 html5 canvas 的图像源。这意味着可以将视频帧绘制到画布上（并由画布进行操作）。
概述： The context.getImageData方法将以数组形式获取画布的 RGBA 像素数据。修改数组的像素数据后，context.putImageData会将修改后的像素放回到画布上。
A Plan使用 CSS 将 html5 画布放置在网站背景上。使用该画布在网站上绘制视频帧（绿色视频像素变得透明，以便网站背景显示出来）。
（您需要一些组装和学习）:
放置一个覆盖网站背景的 html5 canvas 元素。
在时间循环内（requestAnimationFrame):
- 清除画布：
context.clearRect,
- 在画布上绘制视频帧：
context.drawImage(video,0,0),
- 从画布中获取像素数据：
context.getImageData,
- 检查每个像素的“绿色度”：
if(green>220 && red<20 && blue<20),
- 如果像素呈绿色，则将其设为透明：
(alpha=0),
- 将修改后的像素放回到画布上：
context.putImageData,
- 重复#1，直到视频结束。
帮助您学习的参考资料
Stackoverflow 之前关于 #2 的帖子：将视频标签放在Canvas标签上 https://stackoverflow.com/questions/28513443/put-the-video-tag-on-the-canvas-tag/28513580#28513580
Stackoverflow 之前关于 #3-6 的帖子：循环遍历图像中的像素 https://stackoverflow.com/questions/17714742/looping-through-pixels-in-an-image/17717174#17717174
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
