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

Question

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

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

我将我的 svg 放在一个 div 中，#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得到了一个空png的数据，该数据具有svg的尺寸。

我唯一猜想是 Raphael JS 生成的 svg 的格式不适合 canvg（例如，如果我关注 the W3C recommandations，href 的 image 应该是 xlink:href）

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

Answer 1

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

但在您的代码中，您将 div #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 2

svgfix.js 将解决这个错误。 看看这篇博文Export Raphael Graphic to Image

Answer 3

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

安装后，您只需在终端中执行类似“convert foo.svg foo.png”的命令。如果您使用的是 php，那么您可以这样做：

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

在php中就完成了。