Question

以下代码在FireFox中无法使用。我试图在本地保存画布（图像）：

var canvas = document.getElementById("canvasData");
var link = document.createElement('a');
link.href = canvas.toDataURL("image/png");
link.download = filename + ".png";
link.click();

它在Chrome中运行良好，但在Firefox中无效。

Answer 1

要使其在Firefox中运行，您只需创建一个MouseEvent并在链接对象上发送它（这也适用于Chrome，但在IE中不支持download属性的任何情况下..）：

var canvas = document.getElementById("canvasData");
var link = document.createElement('a');
link.href = canvas.toDataURL();
link.download = filename + ".png";

// create a mouse event
var event = new MouseEvent('click');

// dispatching it will open a save as dialog in FF
link.dispatchEvent(event);

<强> Fiddle demo

Answer 2

尝试在未经用户确认的情况下将文件保存到用户的本地驱动器存在安全风险，并且可能会在将来的Chrome版本中被阻止。

在Firefox（和Chrome）中，用户可以右键单击将画布作为图像保存到其本地驱动器。只需让您的用户知道这是一个选项。

如果你想要更自动的东西，那么请查看Eli Gray的FileSaver脚本，它可以很好地将画布保存到本地驱动器 - 当然还有用户的确认：{{ 3}}

FireFox将图像保存在本地驱动器上

2 个答案: