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
Share Improve this question edited Apr 12, 2016 at 23:32 Owais Ahmed asked Apr 12, 2016 at 23:25 Owais AhmedOwais Ahmed 1,4382 gold badges35 silver badges72 bronze badges 16- 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
Reset to default 8var 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 thedownload
attribute. - It adds the link to the document so that the
.click()
actually works in Firefox and removes it afterwards.