如何复制p5.js中已加载的图像数组以避免重复加载并实现独立重着色？

嘿，我完全懂你遇到的糟心事——重复加载同一张图片既拖慢游戏启动速度，复制后的图像还跟原图像“绑定”在一起，改一个另一个也跟着变，确实头疼！让我帮你理清问题出在哪，以及怎么搞定它。

首先得明确：p5.js里的p5.Image对象不是单纯的像素数据容器，它背后关联着浏览器的画布元素或WebGL纹理引用，所以普通浅拷贝（甚至structuredClone）根本没用——后者会因为无法克隆浏览器原生的画布对象直接报错。你试过的get()和createImage()+copy()其实是正确方向，只是可能时机不对或者细节没处理到位。

核心问题：必须等图片完全加载后再复制 #

你之前用get()复制后没显示图像，大概率是图片还没加载完成就执行了复制操作。loadImage是异步的，如果在图片加载完成前调用get()，得到的会是一个空的图像对象，自然画不出来。

最稳妥的做法是把所有基础图片的加载放在preload()函数里——p5.js会确保preload里的所有资源加载完成后才执行setup()，这时候再复制就不会有问题了。

正确的复制+独立重着色方案 #

这里给你两种可靠的实现方式，选哪种都可以：

方法1：用get()快速创建独立副本

get()方法会返回一个全新的p5.Image实例，拥有完全独立的像素数据，修改副本绝对不会影响原图像。

// 存储只加载一次的基础图片
let baseCarImages = [];
// 存储不同颜色的副本数组
let greenCarImages = [];
let orangeCarImages = [];
let purpleCarImages = [];

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');
}

function setup() {
  createCanvas(800, 600);
  
  // 在setup里复制基础图片到各个颜色数组
  for (let i = 13; i <= 15; i++) {
    greenCarImages[i] = baseCarImages[i].get();
    orangeCarImages[i] = baseCarImages[i].get();
    purpleCarImages[i] = baseCarImages[i].get();
  }
  
  // 给橙色车重着色，这不会影响绿色或基础图片
  recolorImage(orangeCarImages[13], color(255, 165, 0));
  // 给紫色车重着色
  recolorImage(purpleCarImages[13], color(128, 0, 128));
}

// 自定义重着色函数：替换非透明像素为目标颜色
function recolorImage(img, targetColor) {
  img.loadPixels(); // 读取像素数据到内存
  for (let i = 0; i < img.pixels.length; i += 4) {
    // 只修改非透明的像素（避免把透明背景也染上颜色）
    if (img.pixels[i + 3] > 0) {
      img.pixels[i] = red(targetColor);
      img.pixels[i + 1] = green(targetColor);
      img.pixels[i + 2] = blue(targetColor);
      // 保留原图像的透明度
    }
  }
  img.updatePixels(); // 把修改后的像素写回图像
}

function draw() {
  background(200);
  // 绘制不同颜色的车，它们是完全独立的
  image(greenCarImages[13], 100, 100);
  image(orangeCarImages[13], 300, 100);
  image(purpleCarImages[13], 500, 100);
}

方法2：用createImage()+copy()手动复制像素

如果你更倾向手动控制复制过程，这个方法也可行，核心同样是确保原图片加载完成：

function copyImage(originalImg) {
  // 创建一个和原图片尺寸相同的空图像
  let copyImg = createImage(originalImg.width, originalImg.height);
  // 把原图片的像素完全复制到新图像里
  copyImg.copy(
    originalImg,
    0, 0, originalImg.width, originalImg.height,
    0, 0, copyImg.width, copyImg.height
  );
  return copyImg;
}

// 在setup里调用这个函数复制：
orangeCarImages[i] = copyImage(baseCarImages[i]);

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

• 用get()没显示：十有八九是复制时机不对，在图片加载完成前就调用了get()，得到的是空图像。把复制逻辑放在setup()里（preload之后）就解决了。
• 用createImage()+copy()后重着色还是影响原图像：可能是你在重着色的时候不小心操作了原图片，或者复制时原图片还没加载完成，导致复制的是空数据，后续修改时又指向了原图片的像素。

额外调试小技巧 #

如果还是有问题，可以加一些调试代码确认：

• 在复制后打印orangeCarImages[i].width，如果输出0，说明原图片还没加载好。
• 在draw()里打印orangeCarImages[i]，看看是不是p5.Image类型的对象，而不是undefined。

这样操作下来，你就能只加载一次图片，生成完全独立的副本，各自重着色也不会互相影响啦！

备注：内容来源于stack exchange，提问作者user1104028