在Internet Explorer中将Raphaël图像保存为PNG
我使用Raphaël (一个JavaScript库)完成了一些很好的图形，我想添加一个特性来将其保存为PNG文件。
这在除it之外的所有浏览器上都很简单，因为在非it浏览器上，我从Raphaël得到SVG作为输出，然后我可以将其转换为canvas (使用cansvg库)，并且canvas有一个toDataURL()方法。但在ë浏览器上，Raphaël输出的是VML。我不能使用Chrome框架插件。为什么？
我的应用程序的用户选择Internet和Explorer只是因为它预装在Windows上，而他们没有安装其他任何东西的权限。所以他们不能安装这个插件。因此，我的第二个想法是在Internet Explorer上获得一个SVG字符串，将其传递给cansvg以获得画布，然后使用flashCanvas。
我试图欺骗Raphaël，让它认为它是在非in浏览器上运行的，并将SVG作为输出，但我失败了，因为Raphaël使用了Internet Explorer中没有的一些JavaScript函数来生成SVG。
那么如何在Internet Explorer下完成这项任务呢？
回答 4
Stack Overflow用户
发布于 2010-12-02 22:04:16
Raphaël在Internet Explorer中使用VML，在所有其他浏览器中使用SVG。Canvas具有作为图像导出的内置功能，而VML中并未内置此类功能。对于不受支持的浏览器，您可以使用服务器端代码来实现相同的功能。
另一种解决方案是为Internet Explorer使用ActiveX解决方案，该解决方案可以从VML生成图像。HTML Snapshot ActiveX Component就是这样一种解决方案。
通常，除非绝对必要，否则不建议实施ActiveX解决方案。
Stack Overflow用户
发布于 2010-12-08 03:38:28
RaphaelJS不使用画布。它在IE中使用VML，但在所有其他浏览器中使用SVG。
正如OP所说，你可以抓取原始的SVG (因为它是一个完整的SVG文档)并下载它，他正在寻找一些类似的VML功能。
我唯一能想到的办法，就是让IE把VML数据(如果可能的话)发送回一个服务器，服务器将其转换成PNG并下载。
然而，如果你想要一个PNG，你最好从一开始就使用canvas，因为如果你要转换成位图，你可能不需要图形的矢量部分。签出canvas和google IE canvas脚本，看看是否可以使用它。
至于“浏览器对生成图形的支持仍然非常有限”，它不是。查看RaphaelJS.com演示，它是完全可行的，也是一个很好的解决方案。唯一的问题是IE <9，它没有采用任何现代技术，如HTML5，CSS3或SVG。
任何支持Canvas或google IEcanvas的东西也可以产生不错的结果。
Stack Overflow用户
发布于 2013-08-22 04:00:27
PHP & JavaScript解决方案(不需要ImageMagick、Apache Batik Rasterizer或Inkscape!)：
要求
- PHP
- Flash Player 9+ (对于Flashcanvas，如果我是wrong)
- RaphaelJS
- Raphael Export
- CanVG
- FlashCanvas Free or Pro
- Canvas2PNG + save.php (包含在FlashCanvas)
中)，请纠正我
概述
Flashcanvas启动一个空的画布SVG
- Initialise
- 使用拉斐尔导出将纸张从VML转换为SVG
- Initialise在空画布上
- 将SVG字符串从拉斐尔导出发送到canvg
- 一旦canvg在FlashCanvas发起的画布上生成了SVG数据，调用Flashcanvas‘canvas2png Flashcanvas将其另存为PNG！$$<代码>H236<代码>G237
细目
- 启动一个空画布
- 用拉斐尔画一些虚拟样本库
//基本示例var paper = Raphael(10，50,320,200)；var circle = paper.circle(50，40，10)；circle.attr("fill"，"#f00")；circle.attr("stroke"，“#fff”)；
- 使用拉斐尔导出将纸张从VML转换为SVG。
var svg =空画布上的paper.toSVG();
- Initialise Flashcanvas
var canvas = document.getElementById(' Export ')；if (typeof FlashCanvas != "undefined") { FlashCanvas.initElement( canvas )；//在画布上初始化Flashcanvas }
- 将来自拉斐尔导出的SVG字符串发送到canvg
canvg( canvas，svg，{ ignoreMouse: true，//我需要这些选项以便I不会清除画布ignoreAnimation: true，ignoreClear: true，renderCallback: function() { setTimeout( function () { canvas2png(canvas)；}，1000)；}})；
- 一旦canvg在画布上生成了SVG数据，就调用Flashcanvas的canvas2png函数
//在上面的renderCallback canvg函数中调用: renderCallback: function() { setTimeout( function () { canvas2png(canvas)；}，1000)；}
- 纸张另存为PNG！$$$
备注/调查结果
- DON'T包含/使用flashcanvas.js later.
- Canvas2png.js ，这一行的错误，几乎导致我放弃在许多occasions.
- Flashcanvas上的
<head>应尽早包含在flashcanvas.js中，由于某些原因，我有问题时，在默认情况下包含.png文件将提示用户保存。或者，您可以通过编辑中的Flashcanvas save.php文件将.png写入服务器：
readfile('php://input')；
到的：
//注释掉这些，这样下载就不会被强制//header('Content-Type: application/octet-stream')；//header('Content-Disposition:附件；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。因此，您将失去当前的拉斐尔绘图会话。
因此，如果您想在不丢失当前的拉斐尔会话的情况下调用此方法，我解决此问题的方法是将拉斐尔论文保留在一个页面上，而将<canvas>页面保留在另一个页面上。
一般的想法是，将拉斐尔绘图活动保留在主页上，当您准备导出/保存图像时，可以打开一个包含空画布的新窗口，并将SVG data发送到新的临时页面。从那时起，除了在新窗口中之外，您可以在我们停止的地方再次执行这些步骤，并且在生成并保存图像后，在save.php文件的末尾，您可以使用javascript调用：self.close()来关闭新窗口。
我们需要弹出这个新窗口，以便可以使用SVG数据正确处理画布。
使用in浏览器8的
- canvg (Chrome/Firefox工作)无法读取从SVG生成的图像，为了解决这个问题，我不得不使用PHP将"php图像内容“保存为服务器上的临时图像，并通过替换其原始xlink:href.
- canvas2png.js来使用该临时图像作为.php数据的参考。如果您的浏览器确实支持
toDataURL，则会后退一步，使这种跨浏览器的解决方案成为最后的说明。我想，如果您使用支持toDataURL的浏览器进行，我想我应该包括一种快速导出图像的方法，我会推断出，浏览器也支持SVG，因此保存图像的过程要容易得多(不需要Flashcanvas的麻烦)：
1. Initiate an empty canvas
2. Draw some SVG with Raphael
3. Export the SVG string using Raphael Export
4. Use canvg to parse the SVG data into the empty canvas
5. Use canvas.toDataURL()
https://stackoverflow.com/questions/4118134
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号