saving canvas locally in IE

Question

Hi I want to save a canvas locally in IE.

  var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

I couldn't manage to download it with following ways.

1) document.execCommand("SaveAs"..
2) window.location.href = img;
3) $.fileDownload(img);  // jquery download file library-
4) canvas2image // cross domain problem.

Is there a way to save canvas locally in IE without base64 or cross domain problem? Thank you very much.

local-storage tag means something else that what you think it means. — epascarello, Apr 10 '13 at 16:39
As epascarello implies, local-storage really means a special firewalled storage area where your browser can store/retrieve strings (like your dataURL) that are specific to your website. You **can't** save your dataURL to the user's file system--at least not yet (I've heard rumors about allowing this in the future though). So for now, just bounce your image off the server to let the user save it to their local file system. — markE, Apr 10 '13 at 17:25
It is IE9. @markE I save the dataurl to users local system with window.location.href = img. It works at all browser except mobile devices and IE. — user1874941, Apr 11 '13 at 12:05

score 6 · Answer 1 · edited May 23 '17 at 12:17

I know this is late, but I stumbled on this question in my search to do the same thing and I wanted to share a solution that's working for me.

Assuming you have a data URI already, you can create a blob and then use msSaveBlob or msSaveOrOpenBlob

Example:

dataURItoBlob = function(dataURI) {
        var binary = atob(dataURI.split(',')[1]);
        var array = [];
        for(var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {type: 'image/png'});
    }

var blob = dataURItoBlob(uri);
window.navigator.msSaveOrOpenBlob(blob, "my-image.png");

I used this answer for a bulk of my solution.

After typing this, I realize this doesn't really help you with the cross domain issue, so it's a partial answer at best. With that, all I can say is consider using data URIs where possible, if cross domain is an issue.

score 2 · Answer 2 · answered Apr 28 '13 at 09:44

Well, it looks like this doesn't work in IE either, but since you've not listed it, I'll provide an example. This uses the HTML5 download attribute (more here), and allows the user to click a link which then downloads a file.

<a href="data:text/html;base64,PCF...." download="file.png"></a>

saving canvas locally in IE

2 Answers2

Linked