将JavaScript动画渲染为电影

我有一个用JavaScript编写的动画。我想把它渲染成电影。我不希望使用外部帧捕获程序执行此操作。我想要非常精确地控制时间。我更喜欢一个系统，其中：

（1） 我可以在每一帧进行浏览器调用，然后浏览器将当前显示渲染为图像

（2） 因此，我得到了一堆像foo000.svg foo001.svg foo002.svg这样的图像

（3） 稍后，我可以将这些SVG转换为png，并将其转换为一部电影

---

谢谢

只是一个想法，但您可以在每次需要捕获帧时获取内部html，然后将其添加到数组中。捕获完成后，可以将整个阵列发送到服务器。然后回放将要做的是编写内部html。实际上，您需要编写自己的视频格式，其中每一帧都是当时的dom状态

---

顺便说一下，您不能轻松地将HTML转换为SVG。此外，根据您的描述，没有简单的方法可以使用javascript进行屏幕捕获。您可能希望查看flash的功能，以完成此操作，甚至可能是silverlight。

好吧，基本上，您希望在给定的时间点多次渲染网页。我认为有以下几种可能性

• 对于需要链接到的其他站点的小快照的网页，web上有缩略图服务。如果oyu在每单位时间内不要求太多的快照，它们通常是免费的。现在我不知道是否有任何网站不仅提供缩略图，还提供非小型化页面。试着找一个
  还有一些类似的服务提供网页的全面呈现，比如，尽管我认为它们对来自单一来源的请求有更严格的限制
  因此，您的网页可以做的是，在每一帧之后，创建一个新的

  。然后，等待图像加载（JS中有一个事件）并继续动画。要保存这些图像，您可以从浏览器中手动保存，也可以在浏览器缓存中查找它们。。。或者，最优雅的做法是，通过ajax将它们设置到一个服务器应用程序，该服务器应用程序将接收并保存它们
  

• 为了避免这些缩略图服务的限制，为什么不自己构建一个呢？浏览器呈现引擎，如Webkit（Safari、Chrome）或Gecko（Firefox）都是开源的。这一次，在每一帧，javascript应用程序都会获取网页的代码（类似于

  document.getElementsByTagName（'html'）[0].outerHTML

  ）。然后，通过ajax将其发送到您自己的web应用程序，该应用程序将生成快照。这将通过运行渲染引擎、将html标记作为输入传递、获取图像输出并保存来完成

• 最后，一个相当愚蠢但可能仍然可用的方法是使用javascript的

  print

  方法。虽然这可能会要求你每次打印机设置。您肯定安装了postscript打印机，它将（顾名思义）将图像保存到postscript中，而不是打印在纸上。Postscript并不完全是一种图像格式，但它仍然是一种矢量格式，因此应该有一些应用程序将其转换为图像。另外，请注意，打印机的CSS设置通常与屏幕的CSS设置不同，因此请确保它们不会相同；）

---

对于页面缩略图服务来说，这是一个非常酷的想法，但这并不一定能捕捉到用户在浏览器中看到的内容。因此，除非网页根据一天中的时间或其他原因而改变，否则它可能不会非常有用。不过，这很聪明哈。