如何用JavaScript按指定顺序计算多个RGBA混合后的RGB值

实现原理 #

多层RGBA颜色叠加遵循W3C标准的alpha over混合规则，叠加顺序从底层到上层依次计算，单步混合公式如下：

新通道值 = 上层通道值 * 上层透明度 + 底层通道值 * (1 - 上层透明度)

因为背景为完全不透明的RGB颜色，所以叠加过程中不需要考虑累积透明度，直接按顺序执行单步混合即可。

完整实现代码 #

function getMixedRGBByColors(bgColorStr, rgbaArr) {
  // 解析RGB字符串为数字数组，兼容带空格的输入格式
  const parseRgb = (str) => str.split(',').map(val => Number(val.trim()));
  // 解析RGBA字符串为数字数组
  const parseRgba = (str) => {
    const [r, g, b, a] = str.split(',').map(val => Number(val.trim()));
    // 透明度限制在合法区间0-1
    return [r, g, b, Math.max(0, Math.min(1, a))];
  };

  // 初始化底层背景颜色
  let [r, g, b] = parseRgb(bgColorStr);

  // 按传入顺序依次叠加每一层颜色
  for (const rgbaStr of rgbaArr) {
    const [topR, topG, topB, alpha] = parseRgba(rgbaStr);
    // 应用混合公式计算新的颜色值
    r = topR * alpha + r * (1 - alpha);
    g = topG * alpha + g * (1 - alpha);
    b = topB * alpha + b * (1 - alpha);
    // 颜色值限制在合法区间0-255
    [r, g, b] = [r, g, b].map(val => Math.max(0, Math.min(255, val)));
  }

  // 对最终结果取整返回
  return [Math.round(r), Math.round(g), Math.round(b)];
}

// 用法测试
const mixedColor = getMixedRGBByColors(
  "10,10,10",
  [    
    "255,125,0,.25",
    "0,125,0,.55",
    "255,225,25,.66"
  ]
);
console.log(mixedColor); // 输出 [179, 178, 18]，和取色工具结果基本一致

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