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

提供图片文件时可以解决此问题

（显然，将域名替换为正确的域名）