保存svg到磁盤作爲PNG圖像 - 瀏覽器差異

Question

我想保存到一個文件，作爲PNG圖像，用d3.js創建的svg圖。此代碼在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和火狐3060753 4081030.因此，它似乎是Firefox是缺少一些數據，但我不知道這是怎麼回事。

Answer 1

建議.click()方法失敗的Firefox。但window.open(a.href, "_blank");將工作，並打開一個新窗口，其中的圖像。你可以右鍵點擊保存。