Download canvas to Image in IE using Javascript

Question

Below code will convert canvas to image and the same is downloaded in browsers other than IE(I'm using IE9).IE Code opens theDataURL in new tab.But,it is not downloadable.

     if(navigator.appName == "Microsoft Internet Explorer")
              {
                  somehtml1= document.createElement("img");
                  somehtml1.id="imgid";somehtml1.name="imgname";
                  somehtml1.src=canvas.toDataURL("image/png");
                  document.body.appendChild(somehtml1);

                  window.win = open (somehtml1.src);
                   setTimeout('win.document.execCommand("SaveAs")', 500);
                     }           
              else
                       {
                             somehtml= document.createElement("a");
 somehtml.href = canvas.toDataURL("image/png");
 somehtml.download = "test.png"; 

}

Answer 1

Here's what I'm using - not sure what version of IE this requires as I'm using 11. It uses a blob for IE and canvas as a dataURL for other browsers. Tested in Chrome and IE 11.

(canvas is the canvas object, link is an hyperlink object)

           if (canvas.msToBlob) { //for IE
                var blob = canvas.msToBlob();
                window.navigator.msSaveBlob(blob, 'dicomimage.png');
            } else {
                //other browsers
                link.href = canvas.toDataURL();
                link.download = "dicomimage.png";
            }

Answer 2

Fast and Easy for Users: Just open up a new tab displaying the canvas.toDataURL.

Users today are knowledgeable about how to right-click and save.

Trying to push the save-as button for them just creates another potential failure-point in your software. [That's my 2-cents].

Example code:

    $("#save").click(function(){
        var html="<p>Right-click on image below and Save-Picture-As</p>";
        html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";
        var tab=window.open();
        tab.document.write(html);
    });

[ Additional solution ]

You can use the FileSaver.js library to let the user save the canvas to their local drive.

https://github.com/eligrey/FileSaver.js