Problem saving as png a SVG generated by Raphael JS in a canvas
- by ClemDesm
Hi fellow SOers,
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.
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});
});
The alert gives me :
<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>
which is the xml of the svg and if I believe canvg documentation, it's good.
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.
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 )
Anyone got an idea on this problem ? :D
