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

【问题标题】：Programmatically generate PNG from Raphael.JS image以编程方式从 Raphael.JS 图像生成 PNG
【发布时间】：2010-07-28 20:30:24
【问题描述】：

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

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

用户输入参数
我们使用 Raphael 调用生成 JS
我们生成一个执行上述操作的 JS 包装器，并在包含的 div 上调用 .innerHTML，为我们提供 SVG（然后我们将其发送到某个地方）
我们执行 JS 包装器
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 还少。

所以...所有这三个选项都很糟糕。我认为。我错了吗？还有其他方法吗？

【问题讨论】：

标签： javascript image png raphael rhino

【解决方案1】：

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

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

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

【讨论】：

酷...谢谢。这可能真的有效——尽管我的蜘蛛侠感觉在依赖用户浏览器的输出时会感到刺痛。我不能把我的手指放在风险上，但是依靠那种运行的客户端让我感到害怕。你怎么看 - 我只是偏执狂吗？如果不加载渲染它的页面，用户就无法创建 Raphael 图像，我认为我们希望我们的用户启用 JS...
@rfrankel 当然，您可以永远不要相信来自浏览器的输入，即使输入格式正确，也总是存在可能的漏洞利用（例如在 XSLT 引擎中），但我应该考虑验证这一点您的输入实际上是 SVG 将是一个好的开始。
当然 - 我什至没有真正考虑安全风险（我知道如何处理），而是我们将成功创建 Raphael 图像而不是 PNG 的边缘情况，因为用户的浏览器做了一些奇怪的事情或崩溃等等。