在画布中将 Raphael JS 生成的 SVG 保存为 png 时出现问题

我正在尝试转换由以下方式生成的 SVG拉斐尔·JS http://raphaeljs.com/（以及用户，因为您可以拖动和旋转图像）。 我跟着这个在浏览器中将 SVG 转换为图像（JPEG、PNG 等） https://stackoverflow.com/questions/3975499/conversion-of-svg-to-jpeg/3976034#3976034但仍然无法得到它。

这一定很容易，但我无法指出我做错了什么。

我把我的 svg 放在 div 中#ec as 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 文档 http://code.google.com/p/canvg/， 很好。

无论如何，通过这段代码，变量img，它应该具有转换后的图像数据，获取具有 svg 尺寸的空 png 的数据。

我唯一猜想的是 Raphael JS 生成的 svg 对于 canvg 来说格式不正确（例如，href of image应该xlink:href如果我跟随W3C 建议 http://www.w3.org/TR/SVG/struct.html#ImageElement )

有人对这个问题有想法吗？ ：D

canvg接受SVG数据文件路径或单行字符串

但在你的代码中，你正在传递 div 的 html 内容#ec as

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