如何实现将RGB颜色直接转为真实灰度的rgbToGrayscale函数

要实现符合人眼视觉感知的真实灰度转换，采用行业通用的BT.601加权转换公式即可，该公式匹配人眼对不同色光的敏感度差异，针对给出的测试用例计算结果完全匹配预期的[121, 121, 121]输出。

补全后的完整可运行代码如下：

function rgbToGrayscale(red, green, blue) {
    const gray = []

    /* ---- CONVERSION CODE ---- */
    // 按人眼感知权重计算单通道灰度值，取整保证为合法RGB整数值
    const grayLevel = Math.round(0.299 * red + 0.587 * green + 0.114 * blue)
    // 灰度颜色R/G/B三通道值完全相同，填充后返回
    gray.push(grayLevel, grayLevel, grayLevel)

    return gray
}

// color
const rgb = [20, 150, 240]

// grayscale conversion
const gray = rgbToGrayscale(rgb[0], rgb[1], rgb[2]) // [121, 121, 121]

实现说明 #

• 权重系数逻辑：人眼对绿色敏感度最高、红色次之、蓝色最低，三个系数0.299/0.587/0.114是经过视觉实验验证的标准取值，比直接三通道取平均的转换效果更贴近真实灰度感受
• 取整操作：计算得到的原始灰度值是浮点数，通过Math.round取整后才符合RGB通道0-255整数的取值要求
• 灰度值填充：纯灰度颜色的R、G、B三个通道值完全相等，因此把计算得到的单通道灰度值重复三次存入数组即可

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