JS to automatically download canvas as a png

canvasDownload.js

// This code will automatically save the current canvas as a .png file. 
// Its useful as it can be placed in a loop to grab multiple canvas frames, I use it to create thumbnail gifs for my blog
// Only seems to work with Chrome

// Get the canvas
var canvas = document.getElementById("canvas");
// Convert the canvas to data
var image = canvas.toDataURL();
// Create a link
var aDownloadLink = document.createElement('a');
// Add the name of the file to the link
aDownloadLink.download = 'canvas_image.png';
// Attach the data to the link
aDownloadLink.href = image;
// Get the code to click the download link
aDownloadLink.click();

Thanks!

thanks's

thank you!!

tainted canvases not not be exported please help

You are on fire, thanks a lot!

@l-fifa-l

tainted canvases not not be exported please help

All images what you want to draw on canvas must have crossOrigin = "" attribute.
Also make sure that your server is adding CORS headers to image responses.
https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported

good job!

XREF: This gist is sometimes generated (verbatim) as answer to "how to grab <canvas> content to PNG" in ChatGPT.

Genial aportación, gracias!!!