6

是否可以将画布动画导出到视频?我想构建一个允许创建简单动画的工具,但是我想将它们导出为 .avi .mp4 或任何视频格式。

这可能吗?如果是这样,我该怎么做?

4

3 回答 3

7

您可以尝试使用回调函数向 requestAnimationFrame 注册一个侦听器,并在每个循环之后尝试捕获画布 png 文件,使用 html5 的某些持久方法将其保存在服务器端或客户端的某个位置,然后使用其他软件(如 ffmpeg)稍后把它们放在一起形成一个视频文件。

  window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
  })();

获取画布图像/png信息的代码

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");
于 2013-06-26T01:50:17.210 回答
6

好的。我知道我迟到了 7 年,但是:现在有一个完全符合您需求的库!

Whammy.js 对视频进行编码。它工作得很好(但如果您还打算实时查看画布,则会减慢您的应用程序)。

如果没有外部库,这很难做到,我不建议使用您自己的库。

于 2019-02-26T03:00:50.157 回答
1

您可以使用具有画布所在屏幕的预定义区域的屏幕捕获软件。

http://www.webresourcesdepot.com/10-free-screen-recording-softwares-for-creating-attractive-screencasts/

于 2012-05-21T23:33:49.057 回答