Méthode pour convertir HTML5 canvas SVG?

Essayer canvas2svg.js. [Démo]

J'ai couru dans un besoin moi-même et a fini par écrire une bibliothèque pour cela. À l'époque, les autres bibliothèques sont un peu rares, ou qui n'ont pas générer valide SVG.

Le concept de base est le même. Vous créer une maquette toile contexte 2D et générer ensuite une SVG graphe de scène comme vous l'appelez toile commandes de dessin. Fondamentalement, vous pouvez réutiliser la même fonction de dessin. En fonction de ce contexte, vous passez, vous pouvez soit tirer un standard 2D toile ou de générer un document SVG que vous pouvez sérialiser.

Vous ne pouvez pas réellement de "transformer" un élément canvas qui est dessiné, c'est juste une image bitmap, donc gardez cela à l'esprit. Lorsque vous exportez au format SVG que vous êtes vraiment juste d'appeler la même fonction de dessin de nouveau à l'aide d'un faux cadre.

Donc comme un 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

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

Fabric.js annonce avoir un "canevas-à-svg" parser, et il a une démo qui apparemment convertit toile au format SVG. Tandis que les autres éléments ne fonctionnera que si vous utilisez les commandes et puis "Pixelliser toile à" SVG, il a un problème de conversion de l'image par défaut, donc vous pourriez avoir à vérifier si c'est réellement capable de convertir des premières toiles au format SVG ou seulement en cas de création d'articles par le biais de l'éditeur.