SVG轉換被用D3js創建PNG

我有D3js創造了一些圖表，我想通過JavaScript轉換爲PNG圖像，使用戶可以下載圖表。SVG轉換被用D3js創建PNG

我已經看到SVG轉換爲畫布，畫布轉換爲圖像解決方案。這對我不起作用，因爲SVG使用類來對元素進行樣式設置（這是因爲可保留性我不想改變的東西），這導致整個畫布變得黑色，並且線條很粗。

是否有可能在SVG-圖表直接轉換成PNG？

的頁面是一個Ruby on Rails項目內，因此並不一定是一個純JavaScript的解決方案，但我更喜歡用JavaScript來做到這一點，所以我也可以實現它在其他項目中。

2013-10-15 Leon Hooijer

對不起，我還沒有做任何與SVG，所以這個答案可能是廢話:)。你是說通過使用類而不是內聯樣式，當轉換爲畫布時，事情會搞砸嗎？在這種情況下，是不是編程的問題轉化爲畫布前，從應用的CSS類的風格？ – Owen

當我在2個月前添加這個問題時，確實是這個問題。我已經爲您建議的解決方案實施了一個解決方案。之後我遇到的問題是，大多數瀏覽器不會正確渲染生成的畫布/ PNG。這導致元素缺失和/或圖像變黑。我遇到的一個問題是，我無法傳遞data-uri的大於2,048個字符，所以我無法傳遞整個uri來下載它（並非真正的問題相關）。 –

要顯示一個畫面內的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");

來源

2013-12-22 01:13:39 MZaragoza

嗯，我對此有兩個問題：第一：我一定要實現所有3個庫（rgbcolor，stackblur，canvg）？第二：我注意到canvg.js文件是相當大的。你知道任何小型圖書館嗎？或者是否有可能只識別nescesarry方法？我問這是因爲RoR應用程序在第一次加載時加載所有JS文件，所以另一個大型庫（我們已經有很多JS）會在第一次加載時變慢。 –

雖然這不是我的「完美」解決方案，但它確實有效。所以我會接受它作爲答案。 –

Canvg解決方案是否可以與NodeJS一起在服務器端將SVG轉換爲PNG？我嘗試過使用svg2png，但在windows7上運行得並不順利 – amar

SVG轉換被用D3js創建PNG

回答

相關問題