Javascript 保存Rapha和xEB；在Internet Explorer上以PNG格式显示图像

我使用（JavaScript库）完成了一些漂亮的图形，我想添加一个功能将其保存为文件

这在除InternetExplorer之外的所有浏览器上都很简单，因为在非InternetExplorer浏览器上，我从Raphaël获得一个输出，然后我可以将其转换为画布（使用CANSSVG库），画布有一个

toDataURL（）

方法。但在InternetExplorer上，Raphaël输出。我不能使用框架插件。为什么?

我的应用程序的用户选择InternetExplorer仅仅是因为它预装在Windows上，并且他们没有安装其他任何东西的权限。所以他们不能安装这个插件。因此，我的第二个想法是在InternetExplorer上获取一个SVG字符串，将其传递给cansvg以获取画布，然后使用

flashCanvas

我试图欺骗Raphaël，使其认为它是在非InternetExplorer浏览器上运行的，并将SVG作为输出，但我失败了，因为Raphaël使用了InternetExplorer中缺少的一些JavaScript函数来生成SVG

---

那么，我如何在InternetExplorer下完成这项任务呢？

您可能需要考虑在服务器端生成映像。浏览器对生成图形的支持仍然非常有限

---

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

Raphaël在InternetExplorer中使用VML，在所有其他浏览器中使用SVG。Canvas具有作为图像导出的内置功能，而VML中没有内置这样的功能。对于不受支持的浏览器，您可以使用服务器端代码实现相同的功能

另一种解决方案是使用InternetExplorer的解决方案，该解决方案可以从VML生成映像。一个这样的解决办法是

---

通常，除非绝对必要，否则不建议实施ActiveX解决方案。

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

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

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

但是，由于您需要PNG，因此最好从一开始就使用画布，因为如果要转换为位图，则可能不需要图形的矢量侧。签出canvas和googleie canvas脚本，看看是否可以使用它

至于“浏览器对生成图形的支持仍然非常有限”，事实并非如此。查看RaphaelJS.com演示，它是完全可行的，也是一个很好的解决方案。唯一的问题是IEPHP和JavaScript解决方案（不需要Apache Batik光栅化器或！）

要求

PHP

Flash Player 9+（对于Flashcanvas，如果我错了，请纠正我）

Canvas2PNG+save.php（包含在FlashCanvas中）

概述

启动一个空画布

用拉斐尔画一些VML

使用Raphael导出将纸张从VML转换为SVG

在空画布上初始化Flashcanvas

将Raphael导出中的SVG字符串发送到canvg

canvg在FlashCanvas启动的画布上生成SVG数据后，调用FlashCanvas的canvas2png函数

纸张保存为PNG格式$$$ 崩溃

启动一个空画布

<canvas id="myCanvas"></canvas>

var canvas = document.getElementById('export');
if (typeof FlashCanvas != "undefined") {
  FlashCanvas.initElement(canvas); //initiate Flashcanvas on our canvas
}

使用Raphael导出将纸张从VML转换为SVG

var svg = paper.toSVG();

在空画布上初始化Flashcanvas

<canvas id="myCanvas"></canvas>

var canvas = document.getElementById('export');
if (typeof FlashCanvas != "undefined") {
  FlashCanvas.initElement(canvas); //initiate Flashcanvas on our canvas
}

将Raphael导出中的SVG字符串发送到canvg

canvg(canvas, svg, {
  ignoreMouse: true, //I needed these options so Internet Explorer wouldn't clear the canvas
  ignoreAnimation: true,
  ignoreClear: true,
  renderCallback: function() {
    setTimeout(function() {
      canvas2png(canvas);
    }, 1000);
  }
});

canvg在画布上生成SVG数据后，调用Flashcanvas的canvas2png函数

//This is called within the renderCallback canvg function above:
renderCallback: function() {
  setTimeout(function() {
    canvas2png(canvas);
  }, 1000);
}

纸张保存为PNG格式$$$

说明/调查结果

• 不要在FLASHCANVAS中包含/使用EXCANVAS，我犯的这一行错误几乎让我在很多场合放弃了FLASHCANVAS
• Flashcanvas应该尽早包含在
  中，因为某些原因，我在以后包含Flashcanvas.js时遇到了问题
• 默认情况下，Canvas2png.js将提示用户保存.png文件。或者，您可以通过编辑来自的Flashcanvas save.php文件将.png写入服务器：

  readfile('php://input');
  

  //Comment these out so that the download is not forced
  //header('Content-Type: application/octet-stream');
  //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);
  

  至：

  readfile('php://input');
  

  //Comment these out so that the download is not forced
  //header('Content-Type: application/octet-stream');
  //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不是由AJAX运行的！）时，您将被转发到一个空白的save.php，因此您将丢失当前的Raphael绘图会话

因此，如果您希望在不丢失当前Raphael会话的情况下调用此方法，我解决此问题的方法是将Raphael论文放在一页上，将

页放在另一页上

总体思路是将Raphael绘图活动保留在主页上，当您准备导出/保存图像时，可以打开一个包含空画布的新窗口，并将SVG数据发送到该新临时页面。从那时起，除了在新窗口中，您可以完全按照我们停止的步骤进行操作，并且在生成并保存图像后的save.php文件末尾，您可以使用javascript调用：

self.close（）

关闭该新窗口

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

• canvg with InternetExplorer8（Chrome/Firefox工作）无法读取从.php URL生成的图像，要解决这个问题，我必须使用php将“php URL图像内容”保存为服务器上的临时图像，并通过替换其原始xlink:href将该临时图像用作SVG数据的引用

• canvas2png.js有一个后备功能，以防您的浏览器支持

  toDataURL

  ，从而使此解决方案跨浏览器兼容

• 作为