如何复制p5.js中通过loadImage加载的图像数组并避免原图像与副本同步变色？

我完全理解你的困扰——反复加载相同图像既浪费资源又拖慢加载速度，但复制p5.js图像对象后，修改副本却连带着原图像一起变，确实让人头疼。咱们来拆解问题，找到靠谱的解决方案：

问题根源 #

p5.js的loadImage()返回的p5.Image对象，底层关联着Canvas的像素数据缓冲区。如果复制方式没彻底分离这个缓冲区，副本和原图像就会共享同一份像素数据——改一个另一个自然同步变化。而structuredClone()失败，是因为p5.Image包含了无法被结构化克隆的DOM元素（比如内部的Canvas节点）。

可行解决方案 #

方案1：正确使用.get()方法创建独立副本

你之前试.get()没显示图像，大概率是在图像还没加载完成时就调用了这个方法。p5.js的loadImage()是异步操作，必须确保资源加载完毕再执行复制。

步骤如下：

1. 先在preload()中一次性加载所有基础图像（只加载一次）：

let baseCarImages = [];

function preload() {
  // 仅加载一次所需资源，避免重复请求
  baseCarImages[13] = loadImage('carImages P5 Origin/Car292.png');
  baseCarImages[14] = loadImage('carImages P5 Origin/Car315.png');
  baseCarImages[15] = loadImage('carImages P5 Origin/Car337.png');
}

2. 在setup()中（此时所有图像已加载完成），用.get()创建独立副本：

let computer_greenCar_images = [];
let computer_orangeCar_images = [];
let computer_purpleCar_images = [];

function setup() {
  createCanvas(800, 600);
  
  // 初始化绿色图像（直接引用基础图像，若不需要修改绿色原图像的话）
  for (let i = 13; i <= 15; i++) {
    computer_greenCar_images[i] = baseCarImages[i];
  }
  
  // 创建橙色图像的独立副本并修改颜色
  for (let i = 13; i <= 15; i++) {
    // .get()会返回全新的p5.Image，拥有完全独立的像素数据
    computer_orangeCar_images[i] = baseCarImages[i].get();
    modifyImageColor(computer_orangeCar_images[i], 255, 165, 0);
  }
  
  // 同理创建紫色副本
  for (let i = 13; i <= 15; i++) {
    computer_purpleCar_images[i] = baseCarImages[i].get();
    modifyImageColor(computer_purpleCar_images[i], 128, 0, 128);
  }
}

// 封装修改图像颜色的工具函数
function modifyImageColor(img, r, g, b) {
  img.loadPixels();
  for (let p = 0; p < img.pixels.length; p += 4) {
    // 保留原图像透明度，替换RGB值
    img.pixels[p] = r;
    img.pixels[p+1] = g;
    img.pixels[p+2] = b;
    // img.pixels[p+3] 为透明度，保持不变
  }
  img.updatePixels();
}

方案2：手动创建独立图像并复制像素

如果.get()还是有问题，你可以手动创建新的p5.Image并完整复制像素数据，确保完全独立：

function createDeepImageCopy(originalImg) {
  let copyImg = createImage(originalImg.width, originalImg.height);
  // 复制原图像所有像素到新图像
  copyImg.copy(
    originalImg,
    0, 0, originalImg.width, originalImg.height,
    0, 0, copyImg.width, copyImg.height
  );
  // 强制加载并更新像素，确保副本拥有独立的缓冲区
  copyImg.loadPixels();
  copyImg.updatePixels();
  return copyImg;
}

// 使用方式：
computer_orangeCar_images[i] = createDeepImageCopy(baseCarImages[i]);

为什么你之前的尝试失败？ #

• .get()无显示：很大概率是图像未加载完成就调用了.get()——比如你在setup()之外的异步代码中执行复制，或者没使用preload()确保资源加载完毕。
• createImage+copy仍同步变化：可能是你没调用loadPixels()和updatePixels()来确认副本的像素数据被独立存储，导致底层仍共享缓冲区；或者修改颜色时误用了全局tint()（全局tint会影响所有后续绘制的图像，并非真正修改像素数据）。

注意事项 #

• 永远在preload()中加载静态资源，确保所有图像在程序启动前就准备完毕。
• 如果需要动态加载图像（比如游戏运行中加载），要使用loadImage()的回调函数确保加载完成后再创建副本：

loadImage('carImages P5 Origin/Car292.png', (img) => {
  let copy = img.get();
  // 在这里处理副本
});

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