p5.js | loadImage()函数

loadImage()函数用于从给定路径加载图像并使用图像创建 p5.Image 对象。

建议在preload()函数中加载图像，因为加载的图像可能无法立即使用。图像最好从相对路径加载，因为某些浏览器可能会由于浏览器的安全特性而阻止从其他远程位置加载。

句法：

loadImage(path, successCallback, failureCallback)

参数：此函数接受三个参数，如上所述和如下所述。

• 路径：这是要加载图像的路径。
• successCallback：这是一个在图像成功加载时调用的函数，它是一个可选参数。
• failureCallback：这是一个函数，如果由于任何错误而无法加载图像，则会调用该函数，它是一个可选参数。

以下示例说明了 p5.js 中的loadImage()函数：

示例 1：此示例显示在 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);
}

输出：

示例 2：此示例显示从 URL 加载图像以及可能发生的两个回调。

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

输出：

• 图片加载成功
  
• 图片加载不出来
  

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/loadImage