RaphaelJS 到 SVG 到

Question

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

SVG 到 CANVAS 部分不起作用。

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

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));  
         }
} );

Answer 2

尝试使用fabric.js 将SVG 转换为画布（这里是demo，当您单击侧边栏中的按钮时，svg 会实时转换为画布）。

Fabric 不支持所有 SVG 功能，但它应该适用于简单的情况。

这是一个使用loadSVGFromURL的例子。

1) 你需要有 元素：

<canvas id="my-canvas"></canvas>

2) 在画布外初始化fabric.Element：

var canvas = new fabric.Element('my-canvas');

3) 通过 XHR 获取 SVG：

canvas.loadSVGFromURL('path_to_your_shape.svg', function(objects, options) {

  // `objects` is now an array of fabric objects representing 
  // svg shapes from the document
  // if it's one shape, we'll just work with that
  // if it's more than one — we'll create a unified group out of it, 
  // using `fabric.PathGroup`

  var loadedObject = objects.length > 1 
    ? new fabric.PathGroup(objects, options) 
    : objects[0];

  // we can now change object's properties like left, top, angle, opacity, etc.
  // this is not necessary, of course

  loadedObject.set({
    left: 123,
    top: 321,
    angle: 55,
    opacity: 0.3
  });

  // and add it to canvas

  canvas.add(loadedObject);
});