p5.js loadImage()用法及代码示例

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

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

用法:

loadImage(path, successCallback, failureCallback)

参数：该函数接受上面提到的和下面描述的三个参数。

path:这是从中加载图像的路径。
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); 
}

输出：

load-image

范例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://p5js.org/reference/#/p5/loadImage

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 p5.js | loadImage() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。