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

我明白你遇到的困扰了——在p5.js里想复用已加载的图片生成独立副本，避免重复加载浪费资源，但之前试的方法要么副本和原图联动变色，要么直接显示不出来。别担心，p5.js完全支持这个操作，只是需要注意几个关键细节，我来帮你梳理清楚：

先分析你之前遇到的问题 #

1. .get()方法副本不显示：大概率是你在图片还没加载完成时就调用了复制操作。loadImage是异步的，如果在preload之外（比如draw里）提前执行复制，此时原图还没加载好，生成的副本自然是空的，没法显示。
2. createImage+copy()导致联动变色：可能是你在重着色时不小心操作了原图的像素，或者在draw循环里重复执行了复制逻辑——每次draw都把原图覆盖到副本上，导致重着色的效果被冲掉。另外，少数情况下需要手动触发像素更新来确保副本独立性。
3. structuredClone报错：这个是正常的，因为p5.js的p5.Image对象包含Canvas元素和自定义方法，不属于JavaScript可结构化克隆的数据类型，所以这个方法本来就不适用。

正确的解决方案 #

核心原则：必须等所有原图完全加载完成后，再执行复制操作，推荐在setup()里完成复制（因为preload执行完后才会进入setup，此时所有图片都已加载就绪）。

方法1：用.get()生成独立副本（最简单）

.get()方法本身就会返回一个全新的p5.Image实例，像素数据完全独立，不会和原图联动。只要确保在图片加载完成后调用即可：

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

// 先在preload里只加载一次原图
function preload() {
  computer_greenCar_images[13] = loadImage('carImages P5 Origin/Car292.png');
  computer_greenCar_images[14] = loadImage('carImages P5 Origin/Car315.png');
  computer_greenCar_images[15] = loadImage('carImages P5 Origin/Car337.png');
}

function setup() {
  createCanvas(800, 600);
  
  // 复制绿色车图片到橙色、紫色数组
  for (let i = 13; i <= 15; i++) {
    computer_orangeCar_images[i] = computer_greenCar_images[i].get();
    computer_purpleCar_images[i] = computer_greenCar_images[i].get();
  }
  
  // 给副本重着色，完全不影响原图
  recolorImage(computer_orangeCar_images[13], color(255, 165, 0));
  recolorImage(computer_purpleCar_images[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] === 0 && img.pixels[i+1] === 255 && img.pixels[i+2] === 0) {
      img.pixels[i] = red(targetColor);
      img.pixels[i+1] = green(targetColor);
      img.pixels[i+2] = blue(targetColor);
      // 保留原alpha通道，不需要可以替换成alpha(targetColor)
    }
  }
  img.updatePixels();
}

function draw() {
  background(220);
  // 绘制原图（绿色）
  image(computer_greenCar_images[13], 100, 100);
  // 绘制橙色副本
  image(computer_orangeCar_images[13], 300, 100);
  // 绘制紫色副本
  image(computer_purpleCar_images[13], 500, 100);
}

方法2：createImage+copy()的正确用法

如果.get()方法因为某些场景不适用，用createImage生成新画布后，一定要确保副本的像素是独立的，可以手动触发像素加载：

function copyImage(originalImg) {
  let newImg = createImage(originalImg.width, originalImg.height);
  newImg.copy(
    originalImg,
    0, 0, originalImg.width, originalImg.height,
    0, 0, newImg.width, newImg.height
  );
  // 强制加载并更新像素，确保和原图完全独立
  newImg.loadPixels();
  newImg.updatePixels();
  return newImg;
}

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

关键注意事项 #

• 永远不要在draw循环里执行复制操作，否则每帧都会重新复制一次，不仅浪费性能，还会覆盖你之前的重着色结果。
• 重着色时，务必操作副本的pixels数组，不要误操作原图的像素。
• 如果你的图片数量多，可以把原图存在一个共享数组里，再从这个数组复制到各个颜色的车辆数组，彻底避免重复加载。

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