Problème d'enregistrement en tant que png un SVG généré par Raphael JS dans une toile

Question

J'essaye de convertir un SVG généré par Raphael JS (et l'utilisateur, puisque vous pouvez faire glisser et faire pivoter les images). J'ai suivi ce Convert SVG to image (JPEG, PNG, etc.) in the browser mais je n'arrive toujours pas à l'obtenir.

Cela doit être facile, mais je ne peux pas mettre le doigt sur ce que je me trompe.

J'ai obtenu mon svg dans un div avec #ec comme id et le de la toile est #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}); 
}); 

L'alerte me donne:

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

qui est le xml du svg et si je crois canvg documentation, il est bon.

Quoi qu'il en soit, avec ce code, la variable img, qui devrait avoir les données d'image converties, a obtenu les données d'un png vide avec les dimensions du svg.

La seule chose que je pense est que le svg généré par Raphael JS est pas bien pour formated canvg (comme, href de image devrait être xlink:href si je suis the W3C recommandations)

Quelqu'un at-il une idée sur ce problème? : D

Answer 1

J'ai travaillé avec SVG - Edit et généré des images SVG, ce que nous avons fait était d'installer ImageMagic sur le serveur (vous l'avez probablement déjà installé). Une fois installé, vous n'avez qu'à exécuter une commande telle que "convert foo.svg foo.png" dans le terminal. Si vous utilisez php alors vous pouvez faire:

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

En php et c'est fait.

Answer 2

canvg accepte les SVG données un chemin de fichier ou une chaîne unique en ligne

mais dans votre code, vous êtes passer le contenu HTML de la div #ec comme

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

$.html() est à la fois jQuery et DOM de Les méthodes innerHTML renvoient le contenu HTML d'un élément tel quel, donc probablement sur plusieurs lignes.

canvg interprète ce contenu html multi-ligne comme un chemin de fichier,

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

et essaie de récupérer les données de l'URL malformée. Par conséquent, le processus de conversion SVG en Canvas a échoué et c'est la raison pour laquelle vous n'obtenez pas l'image comme prévu.

Voici une version mise à jour qui devrait fonctionner,

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 3

svgfix.js résoudra cette erreur. jetez un coup d'œil à cet article de blog Export Raphael Graphic to Image