Konwertowanie SVG utworzonego za pomocą D3js do PNG

Question

Mam kilka wykresów utworzonych za pomocą D3js, które chcę przekonwertować na obraz PNG za pomocą JavaScript, aby użytkownicy mogli pobrać wykres.

Widziałem rozwiązania, które konwertują SVG na płótno i konwertują płótno na obraz. To nie zadziała, ponieważ SVG używa klas do stylizowania elementów (co raczej nie chciałbym zmieniać ze względu na łatwość), co powoduje, że całe płótno staje się czarne z bardzo grubymi liniami.

Czy można bezpośrednio przekonwertować wykresy SVG na format PNG?

Strona znajduje się wewnątrz projektu Ruby on Rails, więc nie musi być czystym rozwiązaniem JavaScript, ale wolałbym to zrobić z JavaScriptem, aby móc zaimplementować go również w innych projektach.

Answer 1

Aby wyświetlić SVG w płótnie, trzeba najpierw przekonwertować go za pomocą narzędzia parser/renderer takich jak http://code.google.com/p/canvg/

(kod dostosowany od: Konwersja SVG do obrazu (JPEG, PNG, itp) w przeglądarka)

// 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");