FireFox Save Image on local drive

Question

The following code won't work in FireFox. I'm trying to save a canvas (image) locally:

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

It works fine in Chrome but not in Firefox.

Answer 1

To make it work in Firefox you simply need to create a MouseEvent and dispatch it on the link object (this will also work for Chrome, but not in IE which doesn't support the download attribute in any case..):

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