javascript中SVG到PNG的轉換

Question

我正在研究d3.js圖表​​。 我有要以PNG格式打印的雷達圖，但是當我進行轉換時，它什么也沒顯示；當我保存圖像時，它保存了，但是全黑或一段時間會出錯

我使用了兩種方法1.使用在Google上找到的簡單代碼

 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庫中，它什么也沒顯示，第二種方法是

2

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

在這個saveSvgAsPng庫中，但它給出了對'HTMLCanvasElement'執行'toDataURL'的失敗：可能無法導出污染的畫布。

我進行了搜索，但不了解將畫布轉換為PNG的問題是因為SVG轉換為Canvas，但是畫布未轉換為PNG

Answer 1

如果您嘗試轉換為SVG的映像來自另一個域，出於安全原因，您不能在其上使用toDataUrl。

如果您可以控制投放圖片的域，請添加標題

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

提供圖片文件時可以解決此問題

（顯然，將域名替換為正確的域名）