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

Question

我使用 Raphaël （一个 JavaScript 库）完成了一些漂亮的图形，并且我想添加一项功能将其保存为 PNG 文件。

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

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

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

那么如何在 Internet Explorer 下完成此任务呢？

Answer 1

PHP 与JavaScript 解决方案（不需要 ImageMagick、Apache Batik Rasterizer 或 Inkscape!)：

要求

1. PHP
2. Flash Player 9+（对于 Flashcanvas，如果我错了，请纠正我）
3. RaphaelJS
4. Raphael 导出
5. < a href="https://code.google.com/p/canvg/" rel="nofollow">CanVG
6. FlashCanvas 免费版或专业版
7. Canvas2PNG + save.php（包含在 FlashCanvas 中）

概述

1. 启动空画布
2. 使用 Raphael 绘制一些 VML
3. 使用 Raphael Export 将纸张从 VML 转换为 SVG
4. 在空画布上初始化 Flashcanvas
5. 从 Raphael 发送 SVG 字符串导出到canvg
6. 一旦canvg 将SVG 数据生成到FlashCanvas 启动的画布上，调用Flashcanvas 的canvas2png 函数
7. 纸张将保存为PNG！ $$$

细分

1. 启动一个空画布

2. 用 Raphael 绘制一些 VML

   //基本示例
   var 纸 = 拉斐尔(10, 50, 320, 200);
   var 圆 = paper.circle(50, 40, 10);
   圆.attr("填充", "#f00");
   圆.attr("笔划", "#fff");
   

3. 使用 Raphael Export 将纸张从 VML 转换为 SVG。

   var svg = paper.toSVG();
   

4. 在空画布上初始化Flashcanvas

   var canvas = document.getElementById('export');
   if (FlashCanvas 类型!= "未定义") {
     FlashCanvas.initElement(canvas); //在我们的画布上启动Flashcanvas
   }
   

5. 将 SVG 字符串从 Raphael Export 发送到 canvg

   canvg(画布, svg, {
     ignoreMouse: true, //我需要这些选项，这样 Internet Explorer 就不会清除画布
     忽略动画：true，
     忽略清除：正确，
     渲染回调：函数（）{
       设置超时（函数（）{
         canvas2png（画布）；
       }, 1000);
     }
   });
   

6. canvg 将 SVG 数据生成到画布上后，调用 Flashcanvas 的 canvas2png 函数

   //这是在上面的renderCallback canvg函数中调用的：
   渲染回调：函数（）{
     设置超时（函数（）{
       canvas2png（画布）；
     }, 1000);
   }
   

7. 纸张保存为PNG！ $$$

注释/调查结果

• 不要将 EXCANVAS 与 FLASHCANVAS 一起使用，我犯的这一行错误多次几乎导致我放弃 FlashCanvas。
• Flashcanvas 应该尽早包含在 中，由于某种原因，我在稍后包含 flashcanvas.js 时遇到了问题。

• Canvas2png.js 默认情况下会提示用户保存 .png 文件。或者，您可以通过编辑 Flashcanvas save.php 文件将 .png 写入服务器来自：

  readfile('php://input');
  

  致：

  //将这些注释掉，这样就不会强制下载
  // header('内容类型：应用程序/八位字节流');
  // header('Content-Disposition:attachment; filename="canvas.png"');
  
  $putdata = fopen("php://input", "r");
  $fp = fopen("path/to/image_name.png", "w");
  while ($data = fread($putdata, 1024)) {
    fwrite($fp, $data);
  }
  fclose($fp);
  fclose($putdata);
  

• 按照最后一条注释：如果您选择将图像保存到相反，默认情况下，当您调用 canvas2png() 时，您将被转发到一个空白的 save.php（save.php 不是由 AJAX 运行！），因此您将丢失当前的 Raphael 绘图会议。

因此，如果您想在不丢失当前 Raphael 会话的情况下调用此方法，我解决此问题的方法是将 Raphael Paper 保留在一页上，而 另一页。

总体思路是，将 Raphael 绘图活动保留在主页上，当您准备导出/保存图像时，可以打开一个包含空画布的新窗口，然后发送SVG 数据到新的临时页面。从那里开始，除了在新窗口中之外，您可以完全按照我们停止的位置再次执行这些步骤，并且在生成并保存图像后的 save.php 文件末尾，您可以使用 javascript 调用：self .close() 关闭该新窗口。

我们需要弹出这个新窗口，以便可以使用 SVG 数据正确处理画布。

• canvg 与 Internet Explorer 8（Chrome/Firefox 工作）无法读取从 .php URL 生成的图像，为了解决此问题，我必须使用 PHP 将“php url 图像内容”保存为临时文件图像并使用该临时图像作为 SVG 数据的参考，方法是替换其原始 xlink:href。

• canvas2png.js 有一个后退功能，以防您的浏览器支持 toDataURL，使该解决方案跨浏览器兼容

• 最后一点，如果您使用支持 toDataURL 的浏览器，我想我会包含导出图像的快速方法，我推断浏览器也支持 SVG，因此保存图像的过程要容易得多（无需 Flashcanvas 麻烦）：

  1. 启动一个空画布
  2. 与 Raphael 一起绘制一些 SVG
  3. 使用 Raphael Export 导出 SVG 字符串
  4. 使用canvg将SVG数据解析到空画布中
  5. 使用canvas.toDataURL()

Answer 2

您可能想研究在服务器端生成图像。浏览器对生成图形的支持仍然相当有限。

Node Canvas 刚刚问世，我过去使用 ImageMagick 取得了巨大成功。

Answer 3

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

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

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

然而，当您想要 PNG 时，您可能最好从一开始就选择画布，因为如果您随后要转换为位图，则可能不需要图形的矢量面。检查 canvas 和 google IE canvas 脚本，看看是否可以使用它。

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

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

Answer 4

Raphaël 在 Internet Explorer 中使用 VML，在所有其他浏览器中使用 SVG。 Canvas 具有导出为图像的内置功能，而 VML 中未内置此类功能。您可以使用服务器端代码来为不受支持的浏览器实现相同的效果。

另一种解决方案是使用 Internet Explorer 的 ActiveX 解决方案，该解决方案可以从 VML 生成图像。其中一种解决方案是 HTML 快照 ActiveX 组件。

一般来说，除非绝对必要，否则不建议实施 ActiveX 解决方案。