将SVG保存为PNG图像到磁盘——浏览器不一致性问题

Question

我正在尝试将用d3.js创建的SVG图形以PNG图片格式保存到文件中。这段代码在Chrome上运行正常（可以将文件保存到磁盘），但在Firefox 32上失败了。有任何想法是为什么吗？

$(".savePNG").click (function() {
    var svg = ($("#svgContainer")[0]).getElementsByTagName("svg")[0];
    var svg_xml = (new XMLSerializer).serializeToString(svg);   // extract the data as SVG text
    var data_uri = "data:image/svg+xml;base64," + window.btoa(svg_xml);

    var image = new Image;
    image.src = data_uri;
    image.onload = function()
    {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;

        var context = canvas.getContext("2d");
        context.clearRect(0, 0, image.width, image.height);
        context.drawImage(image, 0, 0);

        var a = document.createElement("a");
        a.download = "file.png";
        a.href = canvas.toDataURL("image/png");
        a.click ();
    };
});

如果这提供了任何线索 console.log (svg_xml.length + " " + data_uri.length);
在Chrome上返回的是3501304 4668434，而在Firefox上则是3060753 4081030。因此似乎Firefox丢失了一些数据，但我不知道如何解决。

- gaitat

---

在FF中，a.click()失败了。安全限制？ - Alvin K.

Answer 1

如建议所述，.click() 方法在 Firefox 中失效。但是 window.open(a.href, "_blank"); 可以正常工作并打开一个包含该图像的新窗口。您可以右键单击保存它。

- gaitat