将JavaScript动画渲染为电影

时间:2012-05-07 22:37:56

标签: javascript

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

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

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

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

谢谢!

2 个答案:

答案 0 :(得分:2)

嗯,基本上你想在给定的时间点渲染你的网页很多次。我看到了以下几种可能性。

  • 网页上有缩略图服务,用于需要链接到其他网站的小快照的网页。如果oyu每单位时间不请求太多快照,它们通常是免费的。现在我不知道是否有任何提议不仅要渲染缩略图,还要渲染非小型化页面。试着找一个。

    然后有类似的服务提供全面的网页呈现,例如http://browsershots.org/,但我认为他们对来自单一来源的请求有更严格的限制。

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

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

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

答案 1 :(得分:0)

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

顺便说一句,您无法轻松将HTML转换为SVG。此外,根据您的描述,没有简单的方法来使用javascript进行屏幕截图。你可能想看一下flash的功能,甚至可能是银光。