我正在尝试将使用 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 似乎丢失了一些数据,但我不知道该怎么做。
最佳答案
如建议的那样,.click()
方法对于 firefox 失败。但是 window.open(a.href, "_blank");
将工作并打开一个包含图像的新窗口。您可以右键单击以保存它。
关于javascript - 将 svg 保存为 png 图像到磁盘 - 浏览器差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25789086/