3

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

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

4

1 回答 1

2

起始信息：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. 检查每个像素的“green-ish-ness” if(green>220 && red<20 && blue<20)：，
  5. 如果一个像素是绿色的，让它透明：(alpha=0),
  6. 将修改后的像素放回画布上：context.putImageData,
  7. 在 #1 重复，直到视频结束。

帮助您学习的参考资料

Stackoverflow 之前关于 #2 的帖子：将视频标签放在画布标签上

Stackoverflow 之前关于 #3-6 的帖子：循环遍历图像中的像素

于 2015-12-13T18:58:37.527 回答