将画布导出到视频 [关闭]

Posted 2023-03-05

【中文标题】将画布导出到视频 [关闭]

【英文标题】：Exporting canvas to video [closed]

【发布时间】：2012-05-28 11:12:53

【问题描述】：

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

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

【问题讨论】：

我正在寻找类似的东西，到目前为止我还没有找到任何满足我需求的东西，但这里有一种方法可以满足您的需求：作为图像集合发送到您的服务器（ gif 动画），使用服务器上的 ffmpeg 将其转换为视频。沿线 ffmpeg -i animation.gif -s 420x300 animation.avi

【参考方案1】：

您可以尝试使用回调函数向 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");

【讨论】：

这将创建如此大的数据并可能导致服务器或您自己的计算机停机。尝试将任何视频的每一帧转换为 jpgs/pngs ......你会看到。有没有别的办法。

@MuhammadUmer 这无法关闭服务器...

是否可以从客户端导出 mp4 格式的画布？或任何其他使用 javascript、jQuery 或 Angular 框架的解决方案？

【参考方案2】：

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

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

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

【参考方案3】：

您可以使用屏幕捕获软件，其中包含画布所在的屏幕预定义区域。

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

【讨论】：

我认为他的意图是创建一个网页供人们制作动画并保存为视频文件。 @user986871 如果我错了，请纠正我。

是的，我的目的是成为创建简单动画的服务。如果用户需要在此之后录制屏幕，则不是很有用。