以编程方式从Raphael.JS图像生成PNG

Question

我正在编写一个应用程序，让用户可以使用Raphael.JS生成图像。我想要的一个次要功能是生成Raphael画布的PNG。

这是我头脑中的一般管道：

1. 用户输入参数
2. 我们用Raphael调用生成JS
3. 我们生成一个JS包装器，它执行上述操作并在包含div上调用.innerHTML，为我们提供SVG（我们随后将其发送到某处）
4. 我们执行JS包装器
5. SVG被发送到ImageMagick并弹出一个PNG

步骤4是我需要一些指导的步骤。用户可能正在使用IE;我们无法保证JS是在SVG浏览器中执行的。无论如何，我们需要在服务器端运行才能保证可靠性。所以这是我到目前为止提出的三种可能性：

• 在服务器上安装Firefox并在Firefox中运行（3）的结果。这个选项很糟糕，因为安装FF意味着在我们的服务器上安装了一堆X东西，运行FF会带来很多开销，而且我真的不想跟踪进程并在完成后将其终止。
• 使用Node.js + jsdom（http://github.com/tmpvar/jsdom）。这里的缺点是，目前还不清楚jsdom是如何得到支持的 - 声称的网站jsdom.org并不存在。另外，我找不到任何文件。
• 也许和Rhino做点什么？据我所知，Rhino的DOM支持比Node更多。

所以......所有这三个选项都很糟糕。我认为。我错了什么？还有另一种方式吗？

Answer 1

用wkhtmltoimage解决了这个问题。丑陋的解决方案，但它确实有效。

Answer 2

在客户端上序列化SVG文档后，您只需在服务器上运行SVG渲染器和/或光栅化器即可生成PNG。我不清楚你认为JS包装器会做什么，或者为什么需要它。由于您发送的SVG文档不包含动态内容，您只需要将序列化的SVG文档发送到服务器上的光栅化器，以便将其光栅化为PNG。

SVG渲染器/光栅化器可能只是一个调用ImageMagick的CGI脚本，或者可能是更复杂的东西。就个人而言，我建议设置一个运行Apache Batik的servlet，其中包含一个SVG Rasterizer，并且可以通过编程方式调用。快速谷歌搜索表明这对于Batik来说是一项非常常见的任务：http://www.mail-archive.com/batik-users@xml.apache.org/msg06116.html

Answer 3

在通过ImageMagick运行之前，您可以尝试transforming the VML to SVG on the server。我知道项目本身就是PHP，但转换是通过XSL完成的（文件在下载档案中），所以应该可以移植到任何服务器平台。