Problema durante il salvataggio di un file SVG generato da Raphael JS in una tela

Question

Sto provando a convertire un file SVG generato da Raphael JS (e l'utente, poiché è possibile trascinare e ruotare le immagini). Ho seguito questo Convert SVG to image (JPEG, PNG, etc.) in the browser ma ancora non riesco a ottenerlo.

Dev'essere facile ma non riesco a capire cosa ho sbagliato.

Ho ottenuto il mio svg in un div con #ec come id e quello di tela è #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'avviso mi da:

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

che è l'XML del SVG e se credo canvg documentation, è buono.

Ad ogni modo, con questo codice, la variabile img, che dovrebbe avere i dati di immagine convertiti, ha ottenuto i dati di un png vuoto con le dimensioni dello svg.

L'unica cosa che immagino è che la svg generato da Raffaello JS non è ben formattato per canvg (come, href di image dovrebbe essere xlink:href se seguo the W3C recommandations)

Chiunque ha un'idea su questo problema? : D

Answer 1

Ho lavorato con SVG - Edit e generato immagini SVG, quello che abbiamo fatto è stato installare ImageMagic sul server (probabilmente lo avete già installato).

Una volta installato, è sufficiente eseguire un comando come "convert foo.svg foo.png" nel terminale. Se si sta utilizzando php, allora si può fare:

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

In php ed è fatto.

Answer 2

canvg accetta i dati SVG un percorso di file o una stringa a linea singola

ma nel codice, il tuo stanno passando il contenuto HTML del div #ec come

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

Sia jQuery $.html() e DOM di I metodi innerHTML restituiscono il contenuto HTML di un elemento così com'è, quindi molto probabilmente in più righe.

canvg interpreta questo contenuto HTML multi-linea come un percorso di file,

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

e cerca di recuperare i dati da un URL valido.

Quindi il processo di conversione da SVG a Canvas non è riuscito e questo è il motivo per cui non si ottiene l'immagine come previsto.

Ecco una versione aggiornata che dovrebbe funzionare,

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 risolverà questo errori. dai un'occhiata a questo post del blog Export Raphael Graphic to Image