p5.js中如何将当前画布存入数组？报错问题求助

核心错误点 #

• 变量作用域冲突：setup函数里声明了局部let img，覆盖了全局的img变量，导致全局img始终为undefined，调用getCanvas(img)时触发Cannot read property of undefined错误。
• pixels数组使用错误：p5.js中createImage生成的pixels是一维数组，而非二维数组，image.pixels[h][k]的写法不符合API规范。
• 尺寸不匹配风险：img是300x300，但画布是窗口尺寸，遍历画布全尺寸会超出img的像素范围，导致数组越界。
• 缺少数组存储逻辑：需求是存入数组，但原代码未定义存储数组。

修复后的完整代码 #

let canvas;
let savedImages = []; // 用于存储保存的画布图像

function setup() {
  canvas = createCanvas(windowWidth, windowHeight);
  background(220);
}

function draw() {
  // 你的绘图代码，保持不变
  // ...
} 

function saveCurrentCanvas() {
  // 创建和当前画布尺寸一致的图像
  let captureImg = createImage(width, height);
  captureImg.loadPixels();
  
  // 用p5.js内置copy方法高效复制画布像素
  captureImg.copy(canvas, 0, 0, width, height, 0, 0, width, height);
  
  captureImg.updatePixels();
  savedImages.push(captureImg); // 将图像存入数组
  
  // 可选：在左上角显示缩略图（缩小至100x100）
  image(captureImg, 0, 0, 100, 100);
} 

function keyPressed() {
  if (key === 'p'){
    saveCurrentCanvas();
    console.log(`已保存第${savedImages.length}张画布`);
  }
}

关键修复说明 #

• 消除作用域问题：移除setup里的局部img声明，改为在保存时动态创建对应尺寸的图像，避免全局变量混乱。
• 正确复制像素：用p5.js内置的copy方法替代手动循环，既简洁又避免一维数组操作错误，保证像素复制的准确性。
• 实现数组存储：新增savedImages数组，每次按p键就将捕获的图像推入数组，满足存储需求。
• 尺寸匹配：创建的捕获图像和当前画布尺寸一致，避免像素越界问题。

如果需要保存固定300x300的图像，只需修改createImage和copy的参数：

let captureImg = createImage(300, 300);
// 将画布内容缩放到300x300复制到图像中
captureImg.copy(canvas, 0, 0, width, height, 0, 0, 300, 300);

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