将HTML Canvas动画导出为VIDEO

Question

我已经构建了html5画布，该画布具有多个图像以及对这些图像的动画滑动效果。

我希望将整个动画导出为视频

我尝试了一些解决方案，例如从画布捕获图像作为帧，然后使用诸如ffemge create stream之类的服务器软件 不能按要求创建视频文件

我也希望将其包含在浏览器中，但是我没有找到在浏览器中可用的解决方案。

Answer 1

您不能直接从<canvas>元素转到.mp4之类的视频格式。

HTML5 <canvas>标签仅通过output of static image files方法或canvas.toDataURL()方法支持canvas.toBlob()，例如PNG。后面的链接提供了一个将结果保存到磁盘的示例。

您需要采取上述中间步骤，将一系列静止图像捕获为帧，然后使用它们通过ffmpeg之类的东西（如您所说）或允许您进行以下操作的视频编辑软件来创建视频文件根据图像序列创建文件。

如果这是一次性的情况，并且您不需要经常重复，则最简单的选择是使用屏幕捕获软件（在Mac上为Quicktime，在Windows上为Camtasia等其他选项）。仅选择画布区域以仅记录所需的屏幕部分，根据需要修剪起点/终点，并将结果保存为所需的任何视频格式。

或者，截取屏幕截图或将必要的帧导出为PNG，然后重做iMovie或其他内容中的过渡。 HTML通常不是用于视频编辑的正确工具。