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

Question

以下代码在 FireFox 中不起作用。我正在尝试在本地保存 canvas（图像）：

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

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

在 Firefox（和 Chrome）中，用户可以右击将 canvas 作为图像保存到他们的本地驱动器。让您的用户知道这是一个选项。

如果您想要更自动化的东西，请查看 Eli Gray 的 FileSaver 脚本，它可以很好地自动将 canvas 保存到本地驱动器——当然需要用户确认： https://github.com/eligrey/FileSaver.js

Answer 2

要使其在 Firefox 中工作，您只需创建一个 MouseEvent 并将其分派到 link 对象（这也适用于 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

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

FireFox Save Image on local drive

canvas

html5-canvas