如何使用p5.js提取图像中的所有颜色？

原代码的核心问题 #

• 未定义di、di1、di2、di3变量，代码运行会直接报错
• 错误地将未赋值的变量写入图像像素数组，破坏了原图像数据
• 逻辑仅能检测与图像第一个像素不同的颜色，无法收集所有唯一颜色

修正后的实现代码 #

下面的代码会遍历图像所有像素，收集所有唯一颜色，并打印出来，同时可以生成一个色板直观展示：

let img;
// 用于存储唯一颜色的Set（自动去重）
let uniqueColors = new Set();

function preload() {
  img = loadImage("assets/exp1.png");
}

function setup() {
  createCanvas(img.width + 200, img.height); // 预留右侧空间放色板
  pixelDensity(1);
  image(img, 0, 0);
  
  collectUniqueColors();
  displayColorPalette();
  
  noLoop();
}

function collectUniqueColors() {
  img.loadPixels();
  // 遍历所有像素
  for (let y = 0; y < img.height; y++) {
    for (let x = 0; x < img.width; x++) {
      let i = (x + y * img.width) * 4;
      // 获取当前像素的RGBA值
      let r = img.pixels[i];
      let g = img.pixels[i + 1];
      let b = img.pixels[i + 2];
      let a = img.pixels[i + 3];
      // 用字符串作为Set的键，确保相同颜色被去重
      let colorKey = `${r},${g},${b},${a}`;
      uniqueColors.add(colorKey);
    }
  }
  // 打印所有唯一颜色
  console.log("图像中的所有唯一颜色：");
  uniqueColors.forEach(key => {
    let [r, g, b, a] = key.split(',').map(Number);
    console.log(`RGBA(${r}, ${g}, ${b}, ${a})`);
  });
}

function displayColorPalette() {
  let colorSize = 30;
  let xStart = img.width + 20;
  let yStart = 20;
  let index = 0;
  
  uniqueColors.forEach(key => {
    let [r, g, b, a] = key.split(',').map(Number);
    fill(r, g, b, a);
    noStroke();
    // 绘制色板方块，每行放6个
    rect(xStart + (index % 6) * (colorSize + 5), yStart + floor(index / 6) * (colorSize + 5), colorSize, colorSize);
    index++;
  });
}

代码说明 #

• 使用Set存储颜色键，利用其自动去重的特性，确保每个颜色只被记录一次
• 遍历图像时直接读取像素值，不修改原图像数据
• 额外添加了displayColorPalette()函数，在画布右侧生成直观的颜色色板
• 控制台会打印所有颜色的RGBA值，方便后续在项目中调用

内容的提问来源于stack exchange，提问作者Sefa Topçu