p5.js | función cargarImagen()

La función loadImage() se usa para cargar una imagen desde la ruta dada y crear un objeto p5.Image con la imagen.

Se recomienda cargar una imagen en la función preload() ya que es posible que la imagen cargada no esté disponible para su uso inmediato. La imagen se carga preferiblemente desde una ruta relativa, ya que algunos navegadores pueden impedir la carga desde otras ubicaciones remotas debido a las funciones de seguridad del navegador.

Sintaxis:

loadImage(path, successCallback, failureCallback)

Parámetros: Esta función acepta tres parámetros como se mencionó anteriormente y se describe a continuación.

ruta: Esta es la ruta desde donde se cargará la imagen.
SuccessCallback: esta es una función que se llama si la imagen se carga correctamente y es un parámetro opcional.
failCallback: Esta es una función que se llama si la imagen no se carga debido a algún error y es un parámetro opcional.

Los siguientes ejemplos ilustran la función loadImage() en p5.js:

Ejemplo 1: Este ejemplo muestra la carga de la imagen en preload().

let img;
  
function preload() {
  img = loadImage('sample-image.png');
}
  
function setup() {
  createCanvas(300, 200);
  
  text("The image would be loaded below:", 20, 20);
  image(img, 20, 40, 100, 100);
}

Producción:

load-image

Ejemplo 2: este ejemplo muestra la carga de una imagen desde una URL y las dos devoluciones de llamada que pueden tener lugar.

let img;
let url = 
'https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image.png';
  
function setup() {
  createCanvas(400, 200);
  
  textSize(18)
  text("The image would be loaded below:", 20, 20);
  
  loadImage(url, img => {
    image(img, 20, 40, 100, 100);
  },
    (event) => {
      fill("red")
      text("Error: The image could not be loaded.", 20, 40);
      console.log(event);
    }
  );
}

Producción: