Javascript在画布上绘制并将其与视频合并并保存在一起

Question

我有一个应用程序，可以用手绘颜料在画布上绘画。 油漆后面有视频播放。 有什么方法可以将带有绘画数据的视频另存为视频文件？

谢谢

Answer 1

据我所知，没有标准的api将画布数据导出到视频文件。但是，有一些库可以做到这一点。 This question解释了一些可行的方法。

要结合视频和用户输入，您必须使用屏幕外的画布：

var canvas = document.createElement(canvas);
canvas.width = inputCanvasElement.width;
canvas.height = inputCanvasElement.height;
var context = canvas.getContext("2d");

context.drawImage(videoElement,0,0);
context.drawImage(inputCanvasElement,0,0);

这会将视频和画布的内容呈现在一个画布上，然后可以使用某些库将其保存到视频中。

但是，请注意，由于所有这些操作都是在浏览器中完成的（结合了画布和视频内容以及对视频进行编码），因此以高帧率实时进行此操作可能太慢了。