问题保存为png在画布中由Raphael JS生成的SVG [英] Problem saving as png a SVG generated by Raphael JS in a canvas

问题描述

我试图转换 Raphael JS （和用户，因为您可以拖动和旋转图像）生成的SVG。
我遵循此将SVG转换为Jpeg ，但仍然不能得到它。

I'm trying to convert a SVG generated by Raphael JS (and the user, since you can drag and rotate the images). I followed this Conversion of SVG to Jpeg but still can't get it.

这很容易，但我不能把我的手指放在我错了。

It must be easy but I can't put my finger on what I get wrong.

我把我的svg放在一个div中， #ec 为 id ，画布的< $ c> #canvas 。

I got my svg in a div with #ec as id and the canvas's one is #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，如果我相信

which is the xml of the svg and if I believe canvg documentation, it's good.

无论如何，使用这个代码，变量 img ，它应该有转换的图像数据，得到一个空的png的数据与svg的尺寸。

Anyway, with this code, the variable img, which should have the converted image data, got the data of an empty png with the dimensions of the svg.

猜测是Raphael JS生成的svg没有很好地形成canvg（像， href of image 应该是 xlink：href ，如果我按照 W3C推荐）

The only thing I guess is that the svg generated by Raphael JS is not well formated for canvg (like, href of image should be xlink:href if I follow the W3C recommandations )

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

Anyone got an idea on this problem ? :D

推荐答案

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

canvg accepts the SVG data a file path or a single-line string

，但在您的代码中，您传递的是div #ec as

but in your code, your are passing the html content of the div #ec as

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

jQuery的 $。html（） DOM的 innerHTML 方法返回一个元素的HTML内容，因此很可能在多行中。

Both jQuery's $.html() and DOM's innerHTML methods return the HTML content of an element as is, so most probably in multiple lines.

canvg 将此多行HTML内容解释为文件路径，

canvg interprets this multi-line html content as a file path,

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

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

and tries to fetch the data from the malformed url.

因此，SVG到Canvas的转换过程失败，这就是你没有得到期望的图像的原因。

So the SVG to Canvas conversion process failed and that's the reason you are not getting the image as expect.

这里是一个更新的版本，

Here is a updated version that should work,

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

这篇关于问题保存为png在画布中由Raphael JS生成的SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！