RaphaelJS à SVG à

Question

J'essaie de laisser l'utilisateur télécharger le graphique SVG en PNG. Vous pouvez accéder au code via JSFIDDLE

La partie SVG vers CANVAS ne fonctionne pas.

J'ai déjà ajouté canvg et le code de Mozillas, aucun des deux ne fonctionne. J'ai aussi ajouté Canvas2Image qui devrait fonctionner si le canevas a un élément.

Answer 1

Merci à gabelerner qui a développé canvg et qui m'a aidé à le corriger.

1. sur la base de Problème d'enregistrement en png d'un SVG généré par Raphael JS dans un canvas supprimer tous les espaces entre les balises dans le svg
2. sur la base de Problème d'enregistrement en png d'un SVG généré par Raphael JS dans un canvas le href de l'image a été changé en xlink:href
3. d'après gabelerner, ajout de xmlns:xlink="http://www.w3.org/1999/xlink" dans les xlmns svg
4. sur la base de gabelerner, l'image doit être sous le même domaine - pas de crossside
5. D'après gabelerner, Canvas2Image ne peut pas fonctionner dans le cadre, ce qui signifie qu'il n'y a pas de FIDDLE (j'ai donc supprimé la partie FIDDLE pour que ce soit plus clair).

Voici un exemple de partie SVG et JS que vous pourriez vouloir avoir

var svg_XML_NoSpace = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1024" height="768"><desc>Created with Raphaël</desc><defs></defs><image x="0" y="0" width="1024" height="768" preserveaspectratio="none" xlink:href="http://<mydomain>/<myfolder>/<myfile>"></image><path fill="none" stroke="#ff0000" d="M414,114L722,114" style="stroke-width: 3px;" stroke-width="3"></path></svg>'; //based on gabelerner

//add canvas into body        
var canvasID = "myCanvas";
var canvas = document.createElement('canvas');
canvas.id = canvasID;
document.body.appendChild(canvas);

//convert svg to canvas
canvg(document.getElementById(canvasID), svg_XML_NoSpace, { 
    ignoreMouse: true, ignoreAnimation: true, 
    renderCallback: function () {
         //save canvas as image
         Canvas2Image.saveAsPNG(document.getElementById(canvasID));  
         }
} );

Answer 2

Essayez de convertir SVG en canvas avec fabric.js (voici un Démonstration (dans lequel le svg est converti en toile en temps réel, lorsque vous cliquez sur un bouton dans la barre latérale).

Fabric ne supporte pas toutes les fonctionnalités de SVG mais devrait fonctionner pour les cas simples.

Voici un exemple d'utilisation de loadSVGFromURL .

1) Vous devez avoir l'élément <canvas> :

<canvas id="my-canvas"></canvas>

2) Initialiser fabric.Element de la toile :

var canvas = new fabric.Element('my-canvas');

3) Récupérer le SVG via XHR :

canvas.loadSVGFromURL('path_to_your_shape.svg', function(objects, options) {

  // `objects` is now an array of fabric objects representing 
  // svg shapes from the document
  // if it's one shape, we'll just work with that
  // if it's more than one — we'll create a unified group out of it, 
  // using `fabric.PathGroup`

  var loadedObject = objects.length > 1 
    ? new fabric.PathGroup(objects, options) 
    : objects[0];

  // we can now change object's properties like left, top, angle, opacity, etc.
  // this is not necessary, of course

  loadedObject.set({
    left: 123,
    top: 321,
    angle: 55,
    opacity: 0.3
  });

  // and add it to canvas

  canvas.add(loadedObject);
});