I am downloading the image. It is only working in Chrome not in Firefox or IE.

        var a = document.createElement('a');
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'Post-ITIE.jpg';
        a.click()

Can anyone help me how can it be working for all browsers.

JsFiddle example

Help would be highly appreciated. Thanks

I am downloading the image. It is only working in Chrome not in Firefox or IE.

        var a = document.createElement('a');
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'Post-ITIE.jpg';
        a.click()

Can anyone help me how can it be working for all browsers.

JsFiddle example

Help would be highly appreciated. Thanks

• javascript
• html
• canvas
• todataurl

• make sure the versions of FF and IE support HTML5 – DinoMyte Commented Apr 12, 2016 at 23:26
• yup i am using new browsers – Owais Ahmed Commented Apr 12, 2016 at 23:27
• please post the entire code, a snipet would not help much. – DinoMyte Commented Apr 12, 2016 at 23:28
• Internet Explorer doesn't support the download attribute (source: caniuse./#feat=download). As for Firefox, it should work but you should provide a pletely reproducible code example. – Jon Koops Commented Apr 12, 2016 at 23:31
• 2 Obviously that doesn't work in Firefox, since it is proprietary method that only works in Internet Explorer. You can fix the issue in Firefox by appending the link to the document body and triggering click afterwards. I'll make a code example to answer your question. – Jon Koops Commented Apr 12, 2016 at 23:49

1 Answer 1

var fileName = 'Post-ITIE.jpg';

if ('msToBlob' in canvas) { // IE10+
  var blob = canvas.msToBlob();
  navigator.msSaveBlob(blob, fileName);
} else {
  var a = document.createElement('a');
  a.setAttribute('href', canvas.toDataURL());
  a.setAttribute('target', '_blank');
  a.setAttribute('download', fileName);
  a.style.display = 'none';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

It does a couple of thing differently than the code originally provided:

• It checks if the msToBlob method is present to support downloading the file in Internet Explorer.
• It adds a target=blank to the link element. This makes sure that the image is displayed, even if the browser doesn't support the download attribute.
• It adds the link to the document so that the .click() actually works in Firefox and removes it afterwards.