将画布导出为视频

Question

可以将画布动画导出为视频吗？我想建立一个工具，将允许创建简单的动画，但然后我想把它们导出为.avi，.mp4或任何视频格式。

这个是可能的吗？如果是这样，我该怎么做呢？

Answer 1

您可以尝试使用回调函数将侦听器注册到requestAnimationFrame，并在每次循环之后尝试捕获canvas 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");

Answer 2

好吧。我知道我晚了7年，但是:现在有了一个完全符合您需求的库！

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

没有外部库很难做到这一点，我不建议使用您自己的库。

Answer 3

您可以将屏幕捕获软件与画布所在屏幕的预定义区域一起使用。

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