保存为一个由Raphael JS生成的SVG在画布中的问题

Question

我试图转换一个由Raphael JS（和用户，因为你可以拖动和旋转图像）生成的SVG。 我跟着这Convert SVG to image (JPEG, PNG, etc.) in the browser，但仍然无法得到它。

这一定很容易，但我不能把我的手指放在我弄错的地方。

我得到了我的svg与#ec为id和画布的一个是#canvas。

function saveDaPicture(){ 
    var img = document.getElementById('canvas').toDataURL("image/png"); 
    $('body').append('<img src="'+img+'"/>'); 
} 
$('#save').click(function(){ 
    var svg = $('#ec').html(); 
    alert(svg); 
    canvg('canvas', svg, {renderCallback: saveDaPicture(), ignoreMouse: true, ignoreAnimation: true}); 
}); 

警报给我：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="512"> 
<desc>Created with Raphael</desc> 
<defs></defs> 
<image x="0" y="0" width="300" height="512" preserveAspectRatio="none" href="imageurl.jpg"></image> 
<rect x="168" y="275" width="52" height="70" r="0" rx="0" ry="0" fill="none" stroke="#000" stroke-dasharray="8,3" transform="rotate(21.91207728 194 310)" style="opacity: 1; display: none; " opacity="1"></rect> 
<circle cx="50" cy="50" r="50" fill="none" stroke="#000"></circle> 
<image x="358" y="10" width="39" height="138" preserveAspectRatio="none" href="imageurl2.png" style="cursor: move; "></image> 
<image x="397" y="10" width="99" height="153" preserveAspectRatio="none" href="imageurl3.png" style="cursor: move; "></image> 
<image x="184" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl4.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"></image> 
<image x="204" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl5.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"></image> 
<image x="170" y="277" width="48" height="66" preserveAspectRatio="none" href="imageurl6.png" style="cursor: move; opacity: 1; " r="50" opacity="1" transform="rotate(21.91207728 194 310)"></image> 
</svg> 

这是SVG的XML，如果我相信canvg documentation，这是很好的。

无论如何，通过这段代码，变量img（它应该有转换后的图像数据）以svg的尺寸获得了一个空png的数据。

我想唯一的事情是，拉斐尔JS所产生的SVG是没有很好地格式化为canvg（状，imagehref应该是xlink:href如果我按照the W3C recommandations）

任何人有这个问题的想法？ ：D

Answer 1

我使用SVG - Edit并生成了SVG图像，我们所做的是在服务器上安装ImageMagic（您可能已经安装了它）。

安装完成后，您只需要在终端中执行一个像“convert foo.svg foo.png”这样的命令。如果你使用PHP，那么你可以这样做：

shell_exec("convert image.svg image.png"); 

在php中，它已经完成。

Answer 2

canvg接受SVG数据文件路径或单行线

，但在你的代码，你是路过的股利#ec的HTML内容

canvg('canvas', svg, {renderCallback: saveDaPicture, ignoreMouse: true, ignoreAnimation: true}); 

两个jQuery的$.html()与DOM的innerHTML方法按原样返回元素的HTML内容，因此很可能在多行中。

canvg解释此多线html内容作为文件路径，

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="512"> 

并尝试从畸形URL获取数据。

所以SVG到Canvas的转换过程失败了，这就是您没有像期望的那样获取图片的原因。

这里是一个更新的版本，应该工作，

function saveDaPicture(){ 
    var img = document.getElementById('canvas').toDataURL("image/png"); 
    $('body').append('<img src="'+img+'"/>'); 
} 

$('#save').click(function(){ 
    var svg = $('#ec').html().replace(/>\s+/g, ">").replace(/\s+</g, "<"); 
          // strips off all spaces between tags 
    //alert(svg); 
    canvg('canvas', svg, {renderCallback: saveDaPicture, ignoreMouse: true, ignoreAnimation: true}); 
}); 

Answer 3

svgfix.js会解决这个错误。 看看这个博客文章Export Raphael Graphic to Image