rgb 到灰度转换器

Question

有没有一个函数可以将RGB颜色直接转换成真正的灰度形式？

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

    /* ---- CONVERSION CODE ---- */

    return gray
}

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

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

如果有人能找到这个问题的简单答案，我将不胜感激。

Answer 1

感谢@Spektre和@Teemu，该功能现在可以工作了。我发现 @Spektre 的 stackoverflow 链接中的这篇文章也很有用。

---

如果您想要便宜的灰度颜色转换，只需将数字相加然后除以三即可：

function rgbToGrayscale(red, green, blue) {
    const gray = (red + green + blue) / 3

    return [gray, gray, gray]
}

const gray = rgbToGrayscale(20, 150, 240) // [136.6, 136.6, 136.6]

但是因为我们的眼睛混淆了光和颜色，人们发现，对我们来说，蓝色比红色更暗，而红色比绿色更暗。因此，创建并完善了多个公式 平衡人眼的颜色。

这是我觉得相当不错的一个：

function rgbToGrayscale(red, green, blue) {
    /* remember: if you multiply a number by a decimal between 0
    and 1, it will make the number smaller. That's why we don't
    need to divide the result by three - unlike the previous
    example - because it's already balanced. */

    const r = red * .3 // ------> Red is low
    const g = green * .59 // ---> Green is high
    const b = blue * .11 // ----> Blue is very low

    const gray = r + g + b

    return [gray, gray, gray]
}

const rgb = [20, 150, 240]
const gray = rgbToGrayscale(rgb[0], rgb[1], rgb[2])

console.log(rgb)
console.log(gray)

Answer 2

节省空间的单衬：-

对于与OP完全相同的情况（感谢@Joachim）：-

便宜：

for(gray=[];gray.length<3;gray.push([0,1,2].reduce((a,i)=>a+rgb[i],0)/3));

很好：

for(gray=[];gray.length<3;gray.push([.3,.59,.11].reduce((a,v,i)=>a+v*rgb[i],0)/3));

PS：

1. 如果您不介意没有 IE 支持（请检查 support 中的 fill()），您可以将

   for(gray=[];gray.length<3;gray.push

   替换为

   gray=Array(3).fill

   ，然后删除最后一个

   )

   。

2. 在

   Math.round(

   之后添加

   gray.push(

   （如果您执行了 1，则添加

   Array(3).fill(

   ）并在最后一个

   ).toString(16)

   之前添加

   )

   以获取十六进制值。

对于

c='#rrggbb'

至：-

灰度值：

gray=[.3,.59,.11].reduce((a,v,i)=>a+v*parseInt(c[2*i+1]+c[2*i+2],16)/3,0);

灰度#rrggbb：

gray='#'+Array(4).join(Math.round([.3,.59,.11].reduce((a,v,i)=>a+v*parseInt(c[2*i+1]+c[2*i+2],16)/3,0)).toString(16));

PS：提醒一下，灰度颜色只有相同的rr、gg和bb

1. 删除

   v*

   以禁用“相当好”模式（也将

   [.3,.59,.11]

   替换为

   [0,1,2]

   ，然后删除

   v,

   （但我只使用

   v*

   ，以便我可以轻松地在两种模式之间切换））
2. 在

   x.length<6?c[i+1]+c[i+1]:

   后添加

   parseInt(

   以支持'#rrggbb'和'#rgb'
3. 删除

   +1

   ，然后将

   +2

   替换为

   +1

   以支持 'rrggbb' 和 'rgb'
4. 如果没有 IE 支持（检查 support 以获得 repeat()），请删除

   Array(4).join(

   并将最后一个

   )

   替换为

   .repeat(3)