javascript - 在 javascript/p5.js 中查找与当前颜色最接近的索引颜色值

Question

我有一组“索引”RGBA 颜色值，对于我加载的任何给定图像，我希望能够遍历加载像素的所有颜色值，并将它们与最接近的索引相匹配颜色值。因此，如果图像中的像素具有 RGBA(0,0,10,1) 颜色，并且颜色 RGBA(0,0,0,1) 是我最接近的索引值，它将调整加载的像素到 RGBA(0,0,0,1)。

我知道 PHP 有一个函数 imagecolorclosest

int imagecolorclosest( $image, $red, $green, $blue )

javascript/p5.js/processing 有没有类似的东西？将一种颜色与另一种颜色进行比较的最简单方法是什么？目前我可以使用这段代码(使用 P5.js)读取图像的像素:

let img;
function preload() {
  img = loadImage('assets/00.jpg');
}

function setup() {
  image(img, 0, 0, width, height);
  let d = pixelDensity();
  let fullImage = 4 * (width * d) * (height * d);
  loadPixels();
  for (let i = 0; i < fullImage; i+=4) {
    let curR = pixels[i];
    let curG = pixels[i]+1;
    let curB = pixels[i+2];
    let curA = pixels[i+3];
  }
  updatePixels();
}

Answer 1

每种颜色包含 3 个颜色 channel 。将颜色想象成 3 维空间中的一个点，其中每个颜色 channel (红色、绿色、蓝色)都与一维相关联。您必须通过 Euclidean distance 找到最接近的颜色(点) .距离最短的颜色是“最接近”的颜色。

在 p5.js 中你可以使用 p5.Vector用于向量运算。到点之间的欧几里德距离可以通过.dist()来计算.所以分别为“颜色”a 和b 的点之间的距离可以表示为:

let a = createVector(r1, g1, b1);
let b = createVector(r2, g2, b2);
let distance = a.dist(b);

像这样使用表达式:

colorTable = [[r0, g0, b0], [r1, g1, b1] ... ];

int closesetColor(r, g, b) {
    let a = createVector(r, g, b);
    let minDistance;
    let minI;
    for (let i=0; i < colorTable; ++i) {
        let b = createVector(...colorTable[i]);
        let distance = a.dist(b);
        if (!minDistance || distance < minDistance) {
            minI = i; minDistance = distance;
        }
    }
    return minI;
}

function setup() {
    image(img, 0, 0, width, height);
    let d = pixelDensity();
    let fullImage = 4 * (width * d) * (height * d);
    loadPixels();

    for (let i = 0; i < fullImage; i+=4) {
        let closestI = closesetColor(pixels[i], pixels[i+1], pixels[i+2])
        pixels[i]   = colorTable[closestI][0];
        pixels[i+1] = colorTable[closestI][1];
        pixels[i+2] = colorTable[closestI][2];
    }
    updatePixels();
}