saving canvas locally in IE

canvas, download, html, internet-explorer, javascript

Solution

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.

Problem

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.

Original source

Related problems