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