p5js中loadImage加载的图片width始终返回1问题求助

1. 图片width/height始终返回1的原因 #

这是因为图片加载未完成时就读取尺寸导致的。p5.js中通过loadImage()加载图片是异步操作，在图片资源还没完全加载到内存时，p5会默认给图片的width/height赋值为1。虽然后续draw循环中图片能正常显示（draw会持续渲染，等图片加载完成后会显示正确内容），但提前读取尺寸就会得到错误的1。

解决方法：

• 将依赖图片尺寸的逻辑（比如缩放计算）放在loadImage()的回调函数内，确保只有图片加载完成后才执行：

  let userImg;
  function setup() {
    createCanvas(800, 600);
    document.getElementById('upload').addEventListener('change', (e) => {
      const file = e.target.files[0];
      const url = URL.createObjectURL(file);
      loadImage(url, (img) => {
        userImg = img;
        // 在这里读取尺寸才正确
        console.log(userImg.width, userImg.height);
        // 执行等比缩放
        const scaleFactor = min(width / img.width, height / img.height);
        userImg.resize(img.width * scaleFactor, img.height * scaleFactor);
      });
    });
  }
  

• 或者在draw循环中判断图片加载状态，再处理尺寸：

  function draw() {
    background(255);
    if (userImg && userImg.width !== 1) {
      // 图片已加载完成，执行渲染或后续处理
      image(userImg, 0, 0);
    }
  }
  

2. resize/filter仅在draw中生效的原因 #

核心还是图片加载时机的问题：如果在setup中调用resize()或filter()，此时图片可能还未完全加载，方法执行时没有作用到有效图片数据上，所以看起来没效果；而draw循环会反复执行，当图片加载完成后，在draw里调用这些方法就能作用到已加载的图片上。

额外注意：

• resize()和filter()确实会修改原图，但必须确保调用时图片已经加载完成。
• 不要在draw循环中反复调用resize()，否则每次draw都会重新缩放，导致图片持续变形。正确做法是在图片加载完成的回调里执行一次处理，之后在draw里只负责渲染。

示例修正代码：

let userImg;
let isProcessed = false;

function setup() {
  createCanvas(800, 600);
  document.getElementById('upload').addEventListener('change', handleUpload);
}

function handleUpload(e) {
  const file = e.target.files[0];
  const url = URL.createObjectURL(file);
  loadImage(url, (img) => {
    userImg = img;
    // 一次性完成缩放和滤镜处理
    const scaleFactor = min(width / img.width, height / img.height);
    userImg.resize(img.width * scaleFactor, 0); // 0表示按比例自动计算高度
    userImg.filter(GRAY);
    isProcessed = true;
  });
}

function draw() {
  background(255);
  if (userImg && isProcessed) {
    image(userImg, (width - userImg.width)/2, (height - userImg.height)/2);
  }
}

内容的提问来源于stack exchange，提问作者Daniel Cruz