JavaScript中的SVG轉換爲PNG

我正在研究d3.js圖表。我有我想用PNG格式打印的雷達圖表，但是當我做轉換時，它什麼也沒有顯示，當我保存圖像時它保存但全黑或者一段時間給出錯誤JavaScript中的SVG轉換爲PNG

我用了兩種方法 1.用簡單的代碼對谷歌所發現

var $container = $('#chart'); 

    content = $container.html().trim(); 
    canvas = document.getElementById('svg-canvas'); 

// Draw svg on canvas 
    canvg(canvas, content); 

// Change img be SVG representation 
    var theImage = canvas.toDataURL('image/png'); 
    $('#svg-img').attr('src', theImage);

在此使用Canvg庫，但它顯示什麼和第二種方法是

saveSvgAsPng(document.getElementsByTagName("svg")[0], "diagram.png");

在此saveSvgAsPng庫中，但它給出未能在'HTMLCanvasElement'上執行'toDataURL'：受感染的畫布可能無法導出。

我搜查，但不明白的問題是與畫布的變換什麼PNG是SVG轉換爲畫布，但畫布上並沒有轉化爲PNG

來源

2016-02-13 Najam-us-Saqib

您無法將資源轉換爲不是來自同一個域或沒有相應權限的數據URL。這包括本地驅動器上的文件。搜索Tained畫布瞭解更多信息。 – Blindman67

@ Blindman67，從OP說，沒有跡象表明跨國請求。 Najam-us-Saqib，你能告訴我們你生成的圖表的標記嗎？你也可以試試[這個腳本]（https://github.com/Kaiido/SVG2Bitmap）我寫的。請注意，IE Kaiido

@Kaiido來提供解決方法錯誤的OP註釋是」受污染的畫布可能不會被導出「，這是由於源自畫布的交叉來源資源。 – Blindman67

如果像你正試圖轉換爲SVG來自另一個域，您出於安全原因不能使用toDataUrl。

如果你有超過服務於圖像域控制，將報頭

Access-Control-Allow-Origin: http://www.domain-where-you-use-your-javascript.com

服務的圖像文件可以解決這個問題

（顯然，正確的更換域名）時

來源

2016-02-13 10:54:43

JavaScript中的SVG轉換爲PNG

回答

相關問題