p5.js中调用Image对象loadPixels()返回空pixels数组问题求助

你遇到的问题核心是混淆了Image对象的pixels属性和p5.js全局的pixels变量。

你的代码里，img.loadPixels()确实正确加载了图像自身的像素数据，但你打印的pixels.length是全局画布的像素数组长度——此时画布还未绘制任何内容，所以全局pixels是空的。

正确实现方式 #

要获取Image对象的像素数据，需要访问Image对象自身的pixels属性，而非全局的pixels变量：

let img;

function preload() {
  img = loadImage("image.jpg");
}

function setup() {
  createCanvas(400, 400);
  img.loadPixels();
  // 访问img对象专属的pixels属性
  console.log(img.pixels.length);
}

补充说明 #

• 调用img.loadPixels()后，图像的像素数据会存储在img.pixels中，每个像素由RGBA四个数值组成，因此数组长度应为 图像宽度 × 图像高度 × 4。
• 若修改了img.pixels内的数据，需要调用img.updatePixels()才能让修改生效。

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