Comment enregistrer un canevas svg dans le système de fichiers local ?

Question

Existe-t-il un moyen de permettre à un utilisateur, après avoir créé un graphique vectoriel sur un canevas svg en javascript à l'aide d'un navigateur, de télécharger ce fichier sur son système de fichiers local ?

SVG est un domaine totalement nouveau pour moi, alors soyez patient si ma formulation n'est pas exacte.

Answer 1

Vous pouvez éviter un aller-retour vers le serveur.

Encodez votre SVG xml en base64.

Créez ensuite un lien vers ces données. L'utilisateur peut faire un clic droit dessus pour l'enregistrer localement.

// This example was created using Protovis & jQuery
// Base64 provided by http://www.webtoolkit.info/javascript-base64.html
// Modern web browsers have a builtin function to this as well 'btoa'
function encode_as_img_and_link(){
 // Add some critical information
 $("svg").attr({ version: '1.1' , xmlns:"http://www.w3.org/2000/svg"});

 var svg = $("#chart-canvas").html();
 var b64 = Base64.encode(svg); // or use btoa if supported

 // Works in recent Webkit(Chrome)
 $("body").append($("<img src='data:image/svg+xml;base64,\n"+b64+"' alt='file.svg'/>"));

 // Works in Firefox 3.6 and Webit and possibly any browser which supports the data-uri
 $("body").append($("<a href-lang='image/svg+xml' href='data:image/svg+xml;base64,\n"+b64+"' title='file.svg'>Download</a>"));
}

La balise img fonctionne dans Webkit, le lien fonctionne dans Webkit & Firefox, et peut fonctionner dans n'importe quel navigateur qui supporte data-uri

Answer 2

Utilisation de FileSaver.js

saveAs(new Blob([SVG_DATA_HERE], {type:"image/svg+xml"}), "name.svg")

Answer 3

Il serait possible d'utiliser la commande ordinaire "Enregistrer" du navigateur, mais cela n'enregistrerait pas seulement le canevas SVG, mais la page entière.

Je crois que votre meilleure chance est d'utiliser AJAX et d'envoyer l'ensemble des données SVG XML comme données POST à un serveur script, et que ce script renvoie simplement les données POST avec l'en-tête Content-Disposition: attachment; filename=yourfile.svg .

(Sous PHP, vous pouvez obtenir le contenu brut du POST avec file_get_contents('php://input') .)

Answer 4

Avec FileSaver d'Eli Grey, j'ai réussi à le faire fonctionner (chrome) :

bb = new window.WebKitBlobBuilder;
var svg = $('#designpanel').svg('get');
bb.append(svg.toSVG());
var blob = bb.getBlob("application/svg+xml;charset=" + svg.characterSet);
saveAs(blob,"name.svg");

SVG vient de keith woods jquery's svg.

Html Rocks 1

Html Rocks 2

Answer 5

Oui, c'est possible. Utilisez jquery.svg http://keith-wood.name/svgRef.html et envoyez les données xml svg en utilisant la fonction svg.toSVG() (en les écrivant dans un champ caché lors de la soumission). Demandez à php de sauvegarder et de convertir en image matricielle en utilisant imagemagick (convertir image.svg image.png) puis de forcer le téléchargement du fichier en utilisant header("Content-Type : application/octet-stream") et de lire le fichier de l'image.