Skip to content

Instantly share code, notes, and snippets.

@Kaundur
Created June 8, 2017 07:25
Show Gist options
  • Star 26 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();
@cmayeda
Copy link

cmayeda commented Jun 4, 2021

This was just what I needed, thank you!

@colantuomo
Copy link

Thanks for that!

@tiagorangel2011
Copy link

So much thanks for that snipped!

@Nathanlme
Copy link

Thanks !

@SMotaal
Copy link

SMotaal commented Mar 6, 2022

Thanks!

@myrccar
Copy link

myrccar commented Apr 12, 2022

thanks's

@Guyc1800
Copy link

thank you!!

@l-fifa-l
Copy link

tainted canvases not not be exported please help

@yeinercq
Copy link

yeinercq commented Sep 5, 2023

You are on fire, thanks a lot!

@khokm
Copy link

khokm commented Oct 12, 2023

@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

@Firevvork
Copy link

good job!

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