在JavaScript/Node.js中如何从RGB对照表查找最接近的RGB值

前置注意事项 #

你提供的预设色表中第7项的B通道值为350，超过了RGB单通道0-255的合法范围，建议先修正为255避免计算偏差。

核心实现思路 #

1. 预处理色表 #

提前过滤掉数组中不需要的第一个元素，仅保留RGB三个通道值，避免每次匹配时重复处理数据。

2. 颜色距离计算 #

优先选择加权欧氏距离，相比普通欧氏距离更贴合人眼对颜色的感知差异，同时不需要开平方计算，性能足够支撑大量像素的批量处理，计算公式为：
距离值 = 2*(ΔR)² + 4*(ΔG)² + 3*(ΔB)²
其中ΔR、ΔG、ΔB分别是待匹配颜色和预设颜色对应通道的差值。如果追求极致性能且对精度要求不高，也可以使用普通欧氏距离的平方值（(ΔR)² + (ΔG)² + (ΔB)²）。

完整代码示例 #

基础匹配函数 #

// 预处理色表，仅保留RGB通道，自动修正非法通道值
const colorTable = colors.map(item => [item[1], item[2], Math.min(item[3], 255)]);

function matchClosestColor(r, g, b) {
    let minDistance = Infinity;
    let closestIndex = 0;
    // 遍历所有预设颜色计算距离
    for (let i = 0; i < colorTable.length; i++) {
        const [tr, tg, tb] = colorTable[i];
        const dr = r - tr;
        const dg = g - tg;
        const db = b - tb;
        const distance = 2 * dr * dr + 4 * dg * dg + 3 * db * db;
        if (distance < minDistance) {
            minDistance = distance;
            closestIndex = i;
        }
    }
    // 返回匹配到的RGB值，也可以返回原数组的完整项根据需求调整
    return colorTable[closestIndex];
}

测试你给出的示例：输入matchClosestColor(255,7,1)会返回[255,0,0]，符合预期。

结合Jimp批量处理像素示例 #

const Jimp = require('jimp');

async function processImage(imgPath) {
    const image = await Jimp.read(imgPath);
    image.scan(0, 0, image.bitmap.width, image.bitmap.height, (x, y, idx) => {
        const r = image.bitmap.data[idx + 0];
        const g = image.bitmap.data[idx + 1];
        const b = image.bitmap.data[idx + 2];
        const [newR, newG, newB] = matchClosestColor(r, g, b);
        image.bitmap.data[idx + 0] = newR;
        image.bitmap.data[idx + 1] = newG;
        image.bitmap.data[idx + 2] = newB;
        // 保留alpha通道不变，有需求可以自行调整
    });
    await image.writeAsync('output.png');
}

性能优化建议 #

如果需要处理的像素量级特别大（百万级以上），可以提前对所有可能的RGB值（共256256256种）预计算匹配结果生成查找表，后续处理时直接查表即可，速度会提升数十倍。

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