Konvertieren von SVG erstellt mit D3js zu PNG

Question

Ich habe einige Diagramme mit D3js erstellt, die ich über JavaScript in ein PNG-Bild konvertieren möchte, so dass Benutzer das Diagramm herunterladen können.

Ich habe Lösungen gesehen, die das SVG in eine Arbeitsfläche konvertieren und die Zeichenfläche in ein Bild konvertieren. Das funktioniert nicht, weil die SVG Klassen verwendet, um die Elemente zu stylen (was ich wegen der Maintainability lieber nicht ändern würde), was dazu führt, dass die ganze Leinwand schwarz wird und sehr dicke Linien hat.

Ist es möglich, die SVG-Diagramme direkt in PNG zu konvertieren?

Die Seite ist in einem Ruby on Rails-Projekt, damit es nicht eine reine JavaScript-Lösung sein muss, aber ich würde die lieber mit JavaScript tun, so kann ich es auch in anderen Projekten umzusetzen.

Answer 1

Ihr svg Zur Anzeige innerhalb einer Leinwand, können Sie es zuerst konvertieren müssen einen Parser/Renderer-Dienstprogramm wie http://code.google.com/p/canvg/

(Code angepasst von: Konvertieren SVG Bild (JPEG, PNG, etc.) in der Browser)

// the canvg call that takes the svg xml and converts it to a canvas 
canvg('canvas', $("svg").html()); 

// the canvas calls to output a png 
var canvas = document.getElementById("canvas"); 
var img = canvas.toDataURL("image/png");