Export high resolution snapshots from p5.js sketches
Update 2022-06-25:
- When a .png is exported, the resolution (eg. 300 DPI) is also encoded in the PNG image.
Note: it's very much a work in progress. Currently it only works with A* ISO sizes in portrait orientation.
Import the library in your html <head> tag :
<script src="https://unpkg.com/p5.js-export/p5.js-export.js"></script>Then insert saveForPrint() in your code :
saveForPrint("sketch.jpg", "A3", 300);Save the file on key press :
function keyPressed() {
if (keyCode === 83) { // if "s" is pressed
saveForPrint("sketch.jpg", "A3", 300);
}
}4th parameter is used to save multiple frames. Useful if you have an alpha on the background ("blending" multiple draw() calls)
saveForPrint("sketch.jpg", "A3", 300, 10); // save 10 frames- The frames saved are not the previous ones, but the future ones. In that sense, it's not possible to export sketches based on user actions. One possible solution would be to have a notion of recording (start a recording, then move mouse, then save).
- Background has to be set in
draw()function or it will be ignored. One possible solution would be to pass your background as an option in thesaveForPrint()function.
I was looking for a simple way to print sketches at high resoution but couldn't find one. The goal was to have a unique method
as to mimic p5.js save() method.
When calling saveForPrint(), the canvas is scaled to the desired resolution ("A4", "A3", "A2", "A1", "A0"), draw() is called (once or multiple times) then the p5 save() method is called and we reduce the canvas to its original size.