Skip to content Skip to sidebar Skip to footer
Home / Download / Html5 Canvas / Image / Javascript

Download Canvas To Image In IE Using Javascript

Post a Comment
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

Solution 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";
            }

Solution 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


Solution 3:

I was able to save canvas image in IE, CH, FF with the following code in 2019:

<html>
<body>

<canvas id="myCanvas" style="border: 1px solid black">
</canvas>

<input type="button" id="myButton" value="Save Canvas" onclick="saveCanvas()" />

<script>
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.rect(5, 10, 15, 20);
ctx.stroke();

function saveCanvas() {
    if (canvas.msToBlob) { // IE
        blob = canvas.msToBlob();
        window.navigator.msSaveBlob(blob, 'canvas.png');
    } else { // CH, FF
        image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
        window.location.href = image;
    }
}
</script>
</body>
</html>

Post a Comment for "Download Canvas To Image In IE Using Javascript"