0

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

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

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

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

谢谢！

4

2 回答 2

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 设置通常与屏幕的不同，因此请确保它们不会不同；）

于 2012-05-07T23:13:47.843 回答
0

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

顺便说一句，您不能轻松地将 HTML 转换为 SVG。此外，根据您的描述，没有简单的方法可以使用 javascript 进行屏幕截图。你可能想看看 flash 的能力，甚至是silverlight。

于 2012-05-07T23:05:04.713 回答