如何在p5.js的图像数组中获取图像的名称？

p5.js通过loadImage()加载得到的是p5.Image对象，这个对象本身不会自动存储图像的文件名，所以直接打印它只能看到宽高、画布这类属性，拿不到文件名。要解决这个问题，得自己手动把文件名和图像绑定在一起，这里给两种简单的实现方式：

方法1：用对象存储图像与对应名称 #

把数组的每个元素改成包含图像对象和文件名的对象，之后直接读取对象的name属性即可：

function preload() {
  const br = loadImage("br.png");
  // 用对象包装图像和名称
  board = [{ img: br, name: "br.png" }];
}

function draw() {
  // 读取图像名称
  console.log(board[0].name);
  // 绘制图像时用img属性
  image(board[0].img, 0, 0);
  background(220);
}

方法2：给图像对象添加自定义名称属性 #

利用JS对象可以动态添加属性的特性，直接给加载好的图像对象加个name属性：

function preload() {
  const br = loadImage("br.png");
  // 手动添加名称属性
  br.name = "br.png";
  board = [br];
}

function draw() {
  // 直接读取自定义的name属性
  console.log(board[0].name);
  background(220);
}

这两种方法都能让你轻松获取到图像的文件名，选哪种看你代码的实际需求就行。

内容的提问来源于stack exchange，提问作者Churro the Duck