Problem beim Speichern eines von Raphael JS in einer Leinwand generierten SVG

Question

Ich versuche ein SVG zu konvertieren, das von Raphael JS generiert wurde (und der Benutzer, da Sie die Bilder ziehen und drehen können). Ich folgte diesem Convert SVG to image (JPEG, PNG, etc.) in the browser aber immer noch nicht bekommen.

Es muss einfach sein, aber ich kann nicht sagen, was ich falsch verstanden habe.

Ich habe meine Svg in einem div mit #ec als id und die Leinwand ist eins #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}); 
}); 

Der Alarm gibt mir:

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

, die die xml des svg ist und wenn ich canvg documentation glauben, ist es gut.

Wie auch immer, mit diesem Code, die Variable img, die die konvertierten Bilddaten haben sollte, erhielt die Daten eines leeren Png mit den Abmessungen der SVG.

Das einzige, was ich denke, ist, dass die svg von Raphael JS erzeugt wird, auch nicht für canvg formated (wie href von image sollten xlink:href sein, wenn ich the W3C recommandations folgen)

jemand eine Idee zu diesem Problem hat? : D

Answer 1

Ich arbeitete mit SVG - Edit und generierte SVG-Bilder, was wir taten, war ImageMagic auf dem Server zu installieren (Sie haben es wahrscheinlich bereits installiert).

Einmal installiert, müssen Sie nur einen Befehl wie "convert foo.svg foo.png" im Terminal ausführen. Wenn Sie PHP verwenden, dann können Sie tun:

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

In PHP und es ist fertig.

Answer 2

canvg akzeptiert die SVG Daten eines Dateipfad oder eine einzeilige Zeichenfolge

aber in Ihrem Code, Sie sind den HTML-Inhalt des div Beide #ec als

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

vorbei jQuery $.html() und DOM innerHTML Methoden geben den HTML-Inhalt eines Elements zurück, so wie es ist, also höchstwahrscheinlich in mehreren Zeilen.

canvg interpretiert diesen mehrzeiligen HTML-Inhalt als einen Dateipfad,

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

und versucht, die Daten aus der fehlerhaften URL zu holen.

So der Konvertierungsprozess von SVG zu Leinwand fehlgeschlagen und das ist der Grund, warum Sie das Bild nicht erwartet erhalten. Hier

ist eine aktualisierte Version, die funktionieren sollte,

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, diese Fehler zu lösen. werfen Sie einen Blick auf diesen Blog-Post Export Raphael Graphic to Image