CODEWITHSUNDEEP
javascripthtmlinternet-explorercanvasdownload
user1874941
user1874941

Reputation: 3153

saving canvas locally in IE

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.

Upvotes: 8

Views: 4413

Answers (2)

Yetti
Yetti

Reputation: 1710

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.

Upvotes: 6

Luke H
Luke H

Reputation: 3163

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>

Upvotes: 2

Related Questions