1. Screenshot HTML CANVAS element
Libraries like threejs, pixijs, p5js and others that implement web graphics draw something on HTML CANVAS (either WEBGL mode or not).
There are 2 ways to take screenshots of the canvas
1-1. toDataURL() API
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
You may capture the canvas element with this function.
If you also want to download that element, make it <a href> tagged, download it like the examples here: https://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas-todataurl
1-2. Blob API
If you're sending your screenshots to server or backend, then Blob would be better than simply capture via toDataURL() API.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
2. Download Blob
If you captured the canvas element using Blob, you can save or download the file with FileSaver js library.
https://github.com/eligrey/FileSaver.js/
3. Download ZIP
If you want to capture multiple images and download a zip of those (on client side), JSZip library is very helpful.
One minor issue I had was that there's no 'image' type in generateAsync() option. So I had to capture screenshots via Blob in previous steps, save them in JSZip instance, and download the zip.
When I saved screenshots via toDataURL(), add those image into JSZip instance, download the zip, the images wouldn't open and showed error.
Top comments (0)