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的数据。

我唯一想到的是，Raphael JS生成的svg对于canvg来说格式不合适（如href的{{1}} image如果我关注the W3C recommandations }）

有人对这个问题有所了解吗？：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">

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

因此，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

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中已经完成了。

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

3 个答案: