javascript - 将 HTML Canvas 动画导出为 VIDEO

Question

我已经构建了 html5 Canvas ，其中有多个图像和这些图像上的动画滑动效果。

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

我尝试了一些解决方案，该解决方案说从 Canvas 捕获图像作为框架，然后使用一些服务器软件(如 ffemge 创建流) 创建的视频文件不符合要求

我也希望在浏览器本身中拥有它，但我还没有找到任何在浏览器中工作的解决方案。

Answer 1

您不能直接从<canvas>进入元素转换为视频格式，如 .mp4。

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

您需要采取您提到的中间步骤来捕获一系列静止图像作为帧，然后使用这些步骤通过(如您所说)之类的 ffmpeg 或视频编辑软件创建视频文件，该软件允许您从图像序列创建文件。

如果这是一次性情况，而不是您需要经常重复的情况，最简单的选择是使用屏幕捕获软件(Mac 上的 Quicktime，Windows 上的 Camtasia 或其他一些选项)。仅选择 Canvas 区域以仅记录您想要的屏幕部分，根据需要 trim 开始/结束点，并将结果保存为您需要的任何视频格式。

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