Methode zur Umwandlung von HTML5 Canvas in SVG?

Question

Ich muss eine HTML5-Leinwand zur Bearbeitung in SVG konvertieren. Wie kann ich das erreichen?

Answer 1

Versuchen Sie canvas2svg.js . [ Demo ]

Ich habe das selbst gebraucht und habe eine Bibliothek dafür geschrieben. Zu der Zeit, die anderen Bibliotheken waren ein bisschen spärlich, oder nicht erzeugen gültige SVG.

Das Grundkonzept ist jedoch dasselbe. Sie erstellen einen 2D-Canvas-Kontext und generieren dann ein SVG-Szenengraph, wenn Sie Canvas-Zeichenbefehle aufrufen. Im Grunde können Sie dieselbe Zeichenfunktion wiederverwenden. Je nachdem, welchen Kontext Sie ihr übergeben, zeichnen Sie entweder auf eine Standard-2D-Leinwand oder erzeugen ein SVG-Dokument, das Sie serialisieren können.

Sie können ein Canvas-Element, auf das gezeichnet wurde, nicht wirklich "transformieren", da es sich nur um eine Bitmap handelt, denken Sie daran. Wenn Sie nach SVG exportieren, rufen Sie eigentlich nur dieselbe Zeichenfunktion erneut mit einem gefälschten Kontext auf.

Ein kurzes Beispiel:

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

Answer 2

Canvas-svg ermöglicht das Speichern von 2d http://code.google.com/p/canvas-svg/ Sie können mit canvg das Gegenteil tun http://code.google.com/p/canvg/

Answer 3

Siehe auch http://code.google.com/p/html5-canvas-svg/

Fabric.js wirbt damit, einen "Canvas-to-svg"-Parser zu haben, und es gibt eine Demo, die offenbar konvertiert Canvas in SVG . Während die anderen Elemente funktionieren, wenn Sie die Steuerelemente verwenden und dann "Rasterize Leinwand zu" SVG, hat es ein Problem konvertieren das Standard-Bild und nicht alle Objekte als Pfaddaten exportieren (dh, wenn Sie die svg in Stoff ohne Pfaddaten importiert, kann es nicht "vektorisieren" es ab 2020), so müssten Sie überprüfen, ob dies tatsächlich in der Lage ist, rohe Leinwände zu SVG konvertieren oder nur, wenn die Erstellung von Elementen durch den Editor.

Answer 4

Ich denke, die Leinwand muss bereits eine SVG für diese Methode zeichnen, aber ich fand es im Laufe des Versuchs, eine Download-SVG-Schaltfläche selbst zu erstellen, lief auch in diesem Stapel Overflow Frage in der gleichen Suche dachte, es kann relevant sein.

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

etwa Zeile 200, aber wer weiß, vielleicht bearbeitet er die Seite in Zukunft

Editor ist nur ein div-Element, und für den Zweck dieses Geräusches packt er einfach das Material, aus dem das svg erzeugt wurde, in das heruntergeladene svg.

diagram_div ist die Leinwand, in der sich die eigentliche Grafik befindet.

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));
}