javascript - 在 Internet Explorer 上将 Raphaël 图像保存为 PNG

Question

我使用 Raphaël 完成了一些漂亮的图形(一个 JavaScript 库)，我想添加一个功能来将它保存为 PNG文件。

这在除 Internet Explorer 之外的所有浏览器上都很简单，因为在非 Internet Explorer 浏览器上我得到 SVG作为 Raphaël 的输出，然后我可以将其转换为 Canvas (使用 cansvg 库)并且 Canvas 具有 toDataURL() 方法。但是在 Internet Explorer 上，Raphaël 输出 VML .我不能使用 Chrome框架插件。为什么？

我的应用程序的用户选择 Internet Explorer 只是因为它预装在 Windows 上，他们无权安装其他任何东西。所以他们不能安装这个插件。所以我的第二个想法是在 Internet Explorer 上获取 SVG 字符串，将其传递给 cansvg 以获取 Canvas ，然后使用 flashCanvas。

我试图让 Raphaël 认为它在非 Internet Explorer 浏览器上运行并获取 SVG 作为输出，但我失败了，因为 Raphaël 使用了 Internet Explorer 中不存在的一些 JavaScript 函数来生成 SVG。

那么我该如何在 Internet Explorer 下完成这项任务呢？

Answer 1

RaphaelJS 不使用 Canvas 。它在 IE 中使用 VML，但在所有其他浏览器中使用 SVG。

正如 OP 所说，您可以获取原始 SVG(因为它是一个完整的 SVG 文档)并下载它，他正在寻找一些与 VML 类似的功能。

我能想到的唯一方法是让 IE 将 VML 数据(如果可能的话)发送回服务器，服务器将其转换为 PNG 并下载它。

但是，如果您想要 PNG，最好从一开始就选择 Canvas ，因为如果您随后要转换为位图，则可能不需要图形的矢量面。检查 Canvas 和谷歌 IE Canvas 脚本，看看您是否可以改用它。

至于“浏览器对生成图形的支持仍然非常有限”，事实并非如此。查看 RaphaelJS.com 的演示，它完全可行并且是一个很好的解决方案。唯一的问题是 IE <9，它没有采用任何现代技术，如 HTML5、CSS3 或 SVG。

任何支持 Canvas 或 google IEcanvas 的东西也能产生不错的结果。