How to save canvas as png image?

Complete guide to canvas-to-PNG

The fast answer provides a swift solution, but let's dive deeper and address various nuances, considerations, and exceptions when using toDataURL operation to save a canvas as a PNG.

Transparency handling in PNG format

PNG format supports transparency which implies any transparent areas in your canvas will remain so in the runtime image. If your application requires a solid background, simply draw one before exporting.

Navigating through cross-browser differences

Different browsers render things differently and have unique security restrictions. Especially when saving a canvas as an image, testing across different browsers and acknowledging issues like Internet Explorer's security settings is a necessity.

Pandora's box: Alternative for older browsers

The API canvas.toBlob() combined with the saveAs() function from FileSaver.js offers a workaround in contexts like IE9 where toDataURL is unsupported:

canvas.toBlob(function(blob) {
    saveAs(blob, 'canvas-image.png'); // Giving IE a helping hand! 👴
});


Forcing a download with MIME types

To auto-download the image file rather than displaying it in the browser, you can change the MIME type to "image/octet-stream" in the data URL:

link.href = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream"); // BAM! It's downloading! 🚀


Automating downloads: Using download attribute

You can utilize the download attribute on an anchor tag to suggest a filename and prompt a file download:

link.setAttribute('download', 'YourFileName.png'); // It's all in the name... 🖊️
document.body.appendChild(link); // Necessary for Firefox
link.click(); // Initiate the download! 📥
document.body.removeChild(link); // Time to clean up! 🧹


Browser security settings: The bane of developers

Some popup blockers or restrictive browser settings might intervene with the window.open or dynamic link-clicking approach. Always provide alternative instructions for users encountering such issues.

Tips, tricks and workarounds for the pro developer

Having the basics covered, let's dive into some cool advanced techniques and lesser-known tricks:

Saving with dynamic file names

Include the current date and time in the file name to generate unique file names:

let timestamp = new Date().toISOString().replace(/:/g, '-');
link.download = `canvas-image-${timestamp}.png`; // Feel like captaining a time machine yet? 😉


Simplified coding with ES6

With modern browsers in play, use ES6 features to simplify your code. Here’s how:

canvas.toBlob(blob => saveAs(blob, 'canvas-image.png')); // Because, why write more when you can write less? 🤓


Event-driven saving magic

Are you looking to trigger the download via an event, like a button click? Wrap the download logic in a function and bind it to the onclick event:

document.getElementById('downloadButton').onclick = function() {
  // Include the 'fast answer' snippet here, and watch the magic happen! 🪄
};
