The save() method of p5.Image in p5.js is used to save the image to a file by forcing the browser to download it. The file can be saved in two formats, ‘png’ and ‘jpg’. It can also be saved with a ‘gif’ extension if an animated GIF is used with the p5.Image.
Note: It is not recommended calling this function inside the draw() loop, as it will prompt a new save dialog every draw call.
Syntax:
save( filename, extension )
Parameters: This function accepts two parameters as mentioned above and described below.
- filename: It is a String that specifies the filename of the saved file.
- extension: It is a String that specifies the extension of the saved file. It can be either of the value ‘png’ or ‘jpg’.
The examples below illustrate the save() method in p5.js:
Example 1:
javascript
function preload() { img = loadImage( "sample-image.png" ); } function setup() { createCanvas(500, 300); textSize(20); // Apply filter to image img.filter(GRAY); text( 'Current Image' , 20, 20); image(img, 20, 40, 200, 100); } function keyTyped() { // Pressing the "q" key to // save the image if (key === 'q' ) { img.save( 'saved-image' , 'png' ); } } |
Output:
Example 2:
javascript
function preload() { img = loadImage( "sample-gif.gif" ); } function setup() { createCanvas(500, 300); textSize(20); text( 'Current GIF' , 20, 20); image(img, 20, 40, 200, 100); btnSave = createButton( "Save GIF" ); btnSave.position(30, 160); btnSave.mousePressed(saveImg); } function saveImg() { // Save the GIF img.save( "new-gif" ); } |
Output:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5.Image/save