將使用D3js創建的SVG轉換為PNG

Question

我有一些使用D3js創建的圖表，我想通過JavaScript將其轉換為PNG圖像，以便用戶下載圖表。

我已經看到了將SVG轉換為畫布並將畫布轉換為圖像的解決方案。 這對我不起作用，因為SVG使用類對元素進行樣式設置（由於可維護性，我寧願不進行更改），這會導致整個畫布變成黑色且線條很粗。

是否可以將SVG圖直接轉換為PNG？

該頁面位於Ruby on Rails項目中，因此它不一定是純粹的JavaScript解決方案，但我更喜歡使用JavaScript進行此操作，因此我也可以在其他項目中實現它。

Answer 1

要在畫布中顯示svg，首先必須使用解析器/渲染器實用程序（例如http://code.google.com/p/canvg/）將其轉換

（代碼改編自：在瀏覽器中將SVG轉換為圖像（JPEG，PNG等））

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