web-dev-qa-db-fra.com

Méthode pour convertir un canevas HTML5 en SVG?

Besoin de convertir un canevas HTML5 en SVG pour le modifier? Le pointeur sera apprécié

htmlsvg
29
Tommy

Essayez canvas2svg.js . [ Démo ]

J'ai eu besoin de ça moi-même et j'ai fini par écrire une bibliothèque pour ça. À l'époque, les autres bibliothèques étaient un peu clairsemées ou ne généraient pas de SVG valide.

Le concept de base est cependant le même. Vous créez un faux contexte 2D de canevas, puis vous générez un graphique de scène SVG lorsque vous appelez des commandes de dessin de canevas. Fondamentalement, vous pouvez réutiliser la même fonction de dessin. Selon le contexte que vous lui passez, vous dessinez sur un canevas 2D standard ou générez un document SVG que vous pouvez sérialiser.

Vous ne pouvez pas réellement "transformer" un élément de canevas qui a été dessiné, car ce n'est qu'une image bitmap, alors gardez cela à l'esprit. Lorsque vous exportez vers SVG, vous appelez vraiment à nouveau la même fonction de dessin à l'aide d'un faux contexte.

Donc, comme exemple rapide:

//create a canvas2svg mock context
var myMockContext = new C2S(500,500); //pass in your desired SVG document width/height

var draw = function(ctx) {
    //do your normal drawing
    ctx.fillRect(0,0,200,200);
    //etc...
}

draw(myMockContext);
myMockContext.getSerializedSvg(); //returns the serialized SVG document
myMockContext.getSvg(); //inline svg
28
Kerry Liu

canvas-svg vous permet d'enregistrer 2d http://code.google.com/p/canvas-svg/ vous pouvez faire l'inverse avec canvg http://code.google.com/p/canvg /

6
albert

Je pense que le canevas doit déjà dessiner un svg pour cette méthode, mais je l'ai trouvé en essayant de créer moi-même un bouton de téléchargement de svg, j'ai également rencontré cette question de débordement de pile dans la même recherche, pensant que cela pouvait être pertinent.

de https://bramp.github.io/js-sequence-diagrams/

autour de la ligne 200ish, mais qui sait qu'il pourrait modifier le site à l'avenir

l'éditeur est juste un élément div, et pour ce bruit, il ne fait qu'emballer les éléments à partir desquels le svg a été généré dans le svg téléchargé.

diagram_div est la toile dans laquelle se trouve le svg.

function(ev) {
  var svg = diagram_div.find('svg')[0];
  var width = parseInt(svg.width.baseVal.value);
  var height = parseInt(svg.height.baseVal.value);
  var data = editor.getValue();
  var xml = '<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[' + data + ']]></source>' + svg.innerHTML + '</svg>';

  var a = $(this);
  a.attr("download", "diagram.svg"); // TODO I could put title here
  a.attr("href", "data:image/svg+xml," + encodeURIComponent(xml));
}
1
squishy

Voir aussi http://code.google.com/p/html5-canvas-svg/

Fabric.js annonce avoir un analyseur "canvas-to-svg", et il a une démo qui apparemment convertit canvas en SVG . Bien que les autres éléments fonctionnent si vous utilisez les contrôles, puis "Pixelliser le canevas en" SVG, il a un problème de conversion de l'image par défaut, vous devrez donc vérifier si cela est réellement capable de convertir des toiles brutes en SVG ou uniquement si vous créez des éléments via l'éditeur.

0
Brett Zamir