Skip to content

Instantly share code, notes, and snippets.

@Kaundur
Created June 8, 2017 07:25
Show Gist options
  • Star 27 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save Kaundur/2aca9a9edb003555f44195e826af4084 to your computer and use it in GitHub Desktop.
Save Kaundur/2aca9a9edb003555f44195e826af4084 to your computer and use it in GitHub Desktop.
JS to automatically download canvas as a png
// 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();
@Firevvork
Copy link

good job!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment