Question

我正在研究d3.js图表。我有雷达图表，我想以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库中，它没有显示任何内容，第二种方法是

2

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

在此 saveSvgAsPng 库中，它会在无法执行'toDataURL'：可能无法导出受污染的画布。

我搜索但不明白将画布转换为 PNG 的问题是 SVG 转换为Canvas但画布未转换为 PNG

Answer 1

如果您尝试转换为SVG的图片来自其他域名，则出于安全原因，您无法在其上使用toDataUrl。

如果您可以控制为图像提供服务的域，请添加标题

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

提供图像文件时可能会解决此问题

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

在javascript中进行SVG转换为PNG

1 个答案: