p5.Método de guardado de imagen()

El método save() de p5.Image en p5.js se usa para guardar la imagen en un archivo forzando al navegador a descargarla. El archivo se puede guardar en dos formatos, ‘png’ y ‘jpg’. También se puede guardar con una extensión ‘gif’ si se usa un GIF animado con p5.Image.

Nota: No se recomienda llamar a esta función dentro del bucle draw(), ya que generará un nuevo cuadro de diálogo para guardar cada llamada de dibujo.

Sintaxis:

save( filename, extension )

Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación. 

• nombre de archivo: es una string que especifica el nombre de archivo del archivo guardado.
• extensión: Es un String que especifica la extensión del archivo guardado. Puede tener el valor ‘png’ o ‘jpg’.

Los ejemplos a continuación ilustran el método save() en p5.js:

Ejemplo 1:

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');
  }
}

Producción:

Ejemplo 2:

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");
}

Producción:

Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/ referencia/#/p5.Imagen/guardar