将JavaScript动画渲染到电影

Question

我有一个用JavaScript写的动画。我想把它渲染成电影。我不想用外部帧捕获程序来做这件事。我想要非常精确的时间控制。我更喜欢这样的系统：

(1)我可以在每一帧调用浏览器，然后浏览器将当前显示呈现为图像。

(2)因此，我得到了一堆图像，如foo000.svg foo001.svg foo002.svg ...

(3)稍后，我可以将这些svg转换为png，并将其放入一个电影中。

谢谢!

Answer 1

嗯，基本上你想要在给定的时间点渲染你的网页很多次。我认为有以下几种可能性。

• web上有缩略图服务，用于需要链接到的其他网站的小快照的网页。如果oyu在单位时间内不请求太多快照，它们通常是免费的。现在我不知道是否有提供不仅可以渲染缩略图，还可以渲染非微缩页面的浏览器。试着找一个。

然后还有类似的服务，提供网页的全尺寸渲染，如http://browsershots.org/，尽管我认为他们对来自单一来源的请求有更严格的限制。

因此，您的网页可以做的是，在每个帧之后，创建一个具有src = "http://somethumbnailingservice.com/?render=www.mywebsite.com"属性的新<img>元素。然后，等待图像加载(JS中有一个对应的事件)，然后继续您的动画。要保存这些图像，您可以在浏览器中手动保存，也可以在浏览器缓存中查找它们...或者，最优雅的是，通过ajax将它们设置为服务器应用程序，该应用程序将接收和保存它们。

• 为了避免这些缩略图服务的限制，为什么不自己构建一个呢？浏览器渲染引擎，如Webkit (Safari，Chrome)或Gecko (Firefox)都是开源的。这一次，在每一帧，你的javascript应用程序将获取你的网页的代码(类似于document.getElementsByTagName('html')[0].outerHTML)。然后，通过ajax将其发送到您自己的web应用程序，该应用程序将生成快照。这将通过运行渲染引擎，传递html标记作为输入，获取图像输出并保存它来完成。

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

Answer 2

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

顺便说一句，您不能轻易地将HTML转换为SVG。此外，根据您的描述，使用javascript进行屏幕捕获并不是一种简单的方法。你可能想看看flash的能力，或者甚至是silverlight。