Recently, I was involved in a project that made use of canvas. It was a flowchart type application that needed to export the contents of the canvas to a PNG file.
In Chrome and Firefox, this is pretty straightforward. A
window.location = dataUriForPNGFile would render the image in a new tab.
Internet Explorer 11 does not allow navigating to data URIs. I needed to force a download prompt using canvas data.
var canvas = document.getElementById('flowchart'); window.navigator.msSaveBlob(canvas.msToBlob(), 'filename.png'); // pops up download prompt
The snippet of code above is pretty simple. We grab the canvas element and execute
window.navigator.msSaveBlob(). The first argument expects a blob which is returned from
canvas.msToBlob(). The second argument in
msSaveBlob() is the filename of the PNG image.
That's it. Attach this code to a click event and on click, a download prompt will fire up to download the PNG.