Open In App

p5.Image save() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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



Last Updated : 15 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads