javascript - RaphaelJS 到 SVG 到

Question

我正在尝试让用户将 SVG 图形下载为 PNG。您可以通过 JSFIDDLE 获取代码

SVG 到 CANVAS 部分不工作。

已经添加了 canvg 和 Mozillas 的代码，它们都不起作用。还添加了 Canvas2Image，如果 Canvas 有元素，它应该可以工作。

Answer 1

感谢开发canvg的gabelerner帮我修复了

1. 基于 Problem saving as png a SVG generated by Raphael JS in a canvas , 去除 svg 标签之间的所有空格
2. 基于 Problem saving as png a SVG generated by Raphael JS in a canvas图片的 href 更改为 xlink:href
3. 基于 gabelerner，将 xmlns:xlink="http://www.w3.org/1999/xlink"添加到 svg xlmns 中
4. 基于gabelerner，图片必须在同一个域下-不能交叉
5. 基于 gabelerner，Canvas2Image 无法在框架内工作，这意味着没有 FIDDLE(因此我删除了 FIDDLE 部分以使其清楚)

这是您可能想要的示例 SVG 和 JS 部分

var svg_XML_NoSpace = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1024" height="768"><desc>Created with Raphaël</desc><defs></defs><image x="0" y="0" width="1024" height="768" preserveaspectratio="none" xlink:href="http://<mydomain>/<myfolder>/<myfile>"></image><path fill="none" stroke="#ff0000" d="M414,114L722,114" style="stroke-width: 3px;" stroke-width="3"></path></svg>'; //based on gabelerner

//add canvas into body        
var canvasID = "myCanvas";
var canvas = document.createElement('canvas');
canvas.id = canvasID;
document.body.appendChild(canvas);

//convert svg to canvas
canvg(document.getElementById(canvasID), svg_XML_NoSpace, { 
    ignoreMouse: true, ignoreAnimation: true, 
    renderCallback: function () {
         //save canvas as image
         Canvas2Image.saveAsPNG(document.getElementById(canvasID));  
         }
} );