Question

您好我需要将d3.js生成的svg转换为png。这是需要的，因为我们将页面html发送到服务器，然后传递给ABCPDF然后转换为pdf文件。

我们绝对必须支持IE9 +最新版本的chrome和最新版本的firefox。这是我到目前为止所拥有的：

    var canvas = document.createElement("canvas");
    canvas.setAttribute("width", 360);
    canvas.setAttribute("height", 460);
    var ctx = canvas.getContext("2d");
    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
    var url = DOMURL.createObjectURL(svg);
    img.onload = function () {
        ctx.drawImage(img, 0, 0);
        var png = canvas.toDataURL("image/png");
        $('#main-chart').append('<img src="' + png + '"/>');
        $('#main-chart svg').remove("svg");
        DOMURL.revokeObjectURL(png);
    };
    img.src = url;

现在这个解决方案在chrome和firefox上工作得非常好，但对于IE来说它不起作用。

当调用canvas.toDataURL（“image / png”）时，会抛出安全性错误。

我在网上找到的是因为IE在调用toDataUrl（）时不支持CORS，所以会发生这种情况。

有没有人设法找到解决此问题的方法？

我在stackoverflow上看过其他类似的问题，但找不到解决方案。

Answer 1

即使canvg.js也无法在IE9中对DOM元素进行光栅化但是，它可以从url执行，因此一种解决方案可以是将svg保存在服务器上的临时文件中，然后使用canvg将其光栅化。恕我直言，服务器端解决方案，如建议here会更好。

在画布上使用toDataUrl会导致IE中出现SecurityError

1 个答案: