Javascript 使用画布将图像附加到视频中的移动元素

我如何使用HTML5画布创建一个视频，在其中我可以使用色度键在视频中的移动元素上附加一个人的脸。使面与该元素一起移动

我发现了这个网站，它利用了这个

只是想知道如何使用HTML5画布来实现这一点

根据我的研究，我们可以将视频放在视频甚至静态图像上（）。但如何移动静态图像是我要找的

---

也发现了这一点，但它将在视频中创建透明元素，而不会向其附加图像。

对于已知视频，您可以基于视频的

currentTime

存储所有位置，例如在json中（

“myPos”：{“12”：{“x”：40，“y”：30}，13:{“x”：43，“y”：32}…）

然后从中获取位置：

var pos=myPos[~~vid.currentTime]；drawImage（yourFace，pos.x，pos.y）

在视频帧上（由于

drawImage（yourVid，0,0）

）绘制。对于未知视频，您必须在视频中有某种标记，您必须从

getImageData（）读取

's

data

@kaido是的，我的视频中有一个croma标记。我可以通过运行循环来检测色度像素。但是我可以在一个帧中获取该标记的坐标，这样我就可以动态地设置位置而不是静态json吗？那么你需要的是将imageData的索引转换为x，y坐标吗？

var px=i/4；var y=数学地板（px/canvas.width）；变量x=Math.round（（px/canvas.width）-y）*canvas.width）

但是在视频上运行

getImageData

并不是我建议任何人做的事情，而且在未知的客户端配置上。你最好做一次，并将位置存储在json中。@Kaido是的，我明白了你的意思。我会尝试一下这个逻辑。谢谢你的帮助。@karan3112实现了吗？我正在尝试类似于ji比亚布。