将Raphael JS在画布中生成的SVG另存为png的问题

Question

我正在尝试转换由Raphael JS(和用户,因为您可以拖动和旋转图像)生成的SVG .我在浏览器中跟踪了这个转换SVG图像(JPEG,PNG等),但仍然无法获得它.

它一定很容易,但我不能指责我错了.

我得到了我在一个div与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文档,那就好了.

无论如何,使用此代码,img应该具有转换后的图像数据的变量获得具有svg维度的空png的数据.

我想唯一的事情是,拉斐尔JS所产生的SVG是没有很好地格式化为canvg(如,href的image应该是xlink:href,如果我按照W3C的recommandations)

有人对这个问题有所了解吗？:d

Answer 1

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

但是在你的代码中,你传递div的html内容#ec为

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"> 

并尝试从格式错误的网址中获取数据.

因此,SVG to 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

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

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

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

在php中就完成了。