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 库中，但它给出 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may不能导出。

我搜索过但不明白 canvas 到 PNG 的转换问题是什么 SVG转换为 Canvas 但 canvas 没有转换为 PNG

Answer 1

如果您尝试转换为 SVG 的图像来自另一个域，出于安全原因，您不能对其使用 toDataUrl。

如果您可以控制提供图片的域，请添加 header

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

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

（当然，把域名换成正确的）

javascript 中的 SVG 到 PNG 转换

SVG to PNG Conversion in javascript

svg

png

canvas

d3.js