Laden Sie ein Diagramm herunter JOINTJS Image | SVG ==> PNG mit Javascript

Ich habe derzeit ein Problem. Wenn möchte ein Diagramm konvertieren mit JOINTJS Bild erstellt, die Elemente nicht korrekt angezeigt ...Laden Sie ein Diagramm herunter JOINTJS Image | SVG ==> PNG mit Javascript

Diagramm:

http://www.hostingpics.net/viewer.php?id=698706graph.png

Umwandlung:

http://www.hostingpics.net/viewer.php?id=867158graph2.png

Hier ist mein Code:

Nach viel Forschung, verschiedene Codes, kann ich immer noch nicht die Lösung finden. Vielen Dank im Voraus!

Quelle

2016-07-27 Lucatorze

Dies liegt daran, dass Sie keine externen Ressourcen von einem Svg innerhalb eines Elements img laden können. Sie müssen diese in ein DataURI konvertieren und an Ihr Svg-Element anhängen. Es gibt Dupes, und dies [Dokusthema] (http://stackoverflow.com/documentation/html5-canvas/3689/media-types-and-the-canvas/14410/drawing-an-svg-image#t=201607270952095100516) – Kaiido

Hier ist einer der Betrogenen: http://StackOverflow.com/Questions/34042910/convert-svg-to-png-with-applied-images-as-background-to-svg-elements/34043188#34043188 nicht abstimmen schließen, da Sie möglicherweise mehr Probleme haben. – Kaiido

Vielen Dank! Ich könnte meinen Code mit diesem anpassen! – Lucatorze

Lassen Sie mich versuchen zu antworten.

Verwenden Sie den Code unten SVG codierte Daten zu erhalten und speichern sie in var (hier 'encodedData')

var encodedData; 
var s = new XMLSerializer().serializeToString(document.getElementById("ur_svg_id")); 
encodedData = window.btoa(s);

einfach das SVG-Bild zu einem

Leinwand zeichnen

var canvas = document.getElementById('canvas'); 
var ctx = c.getContext('2d'); 
ctx.drawSvg('data:image/svg+xml;base64,' + encodedData, 0, 0, 740, 1100);

Export der Leinwand PNG-Bild mit filesaver.js

canvas.toBlob(function(blob) { 
    saveAs(blob, "MyCanvas.png"); 
});

Machen sie es einfach!

Quelle

2016-07-28 12:28:57

Laden Sie ein Diagramm herunter JOINTJS Image | SVG ==> PNG mit Javascript

Antwort

Verwandte Themen