发布于 由admin

CSS混合模式（Blend Modes）的底层计算：Multiply/Screen/Overlay的像素级算法

CSS 混合模式：Multiply/Screen/Overlay 的像素级算法解析

大家好，今天我们深入探讨 CSS 混合模式中 multiply、screen 和 overlay 这三个常用模式的底层像素级计算原理。理解这些原理对于更精确地控制图像合成效果至关重要。我们将通过理论讲解结合 JavaScript 代码示例来剖析它们的算法。

1. 色彩模型基础回顾

在深入混合模式之前，我们需要对色彩模型有一个基本的认识。在 CSS 中，颜色通常以 RGB (Red, Green, Blue) 形式表示，每个颜色分量的值范围通常是 0 到 255。为了进行像素级的计算，我们需要将这些值归一化到 0 到 1 的范围内。

例如，如果一个像素的 RGB 值为 (255, 128, 0)，那么归一化后的值为 (1, 0.5, 0)。

2. Multiply 混合模式

multiply 混合模式，顾名思义，是将两个图层的对应像素的颜色分量相乘。它通常用于创建阴影或者加深图像颜色。

算法描述：

对于两个图层，分别是源图层（Source）和目标图层（Destination），它们的对应像素的 RGB 分量分别表示为 (Rs, Gs, Bs) 和 (Rd, Gd, Bd)，则 multiply 混合模式的结果像素的 RGB 分量 (Rr, Gr, Br) 计算如下：

  • Rr = Rs * Rd
  • Gr = Gs * Gd
  • Br = Bs * Bd

重要说明：

  • 所有颜色分量必须归一化到 0 到 1 的范围内。
  • multiply 模式的结果颜色总是比源颜色和目标颜色更暗或者相等。
  • 任何颜色与黑色 (0, 0, 0) 进行 multiply 操作，结果都是黑色。
  • 任何颜色与白色 (1, 1, 1) 进行 multiply 操作，结果都是原始颜色。

JavaScript 代码示例：

function multiplyBlend(sourceColor, destinationColor) {
  const Rs = sourceColor.r / 255;
  const Gs = sourceColor.g / 255;
  const Bs = sourceColor.b / 255;

  const Rd = destinationColor.r / 255;
  const Gd = destinationColor.g / 255;
  const Bd = destinationColor.b / 255;

  const Rr = Rs * Rd;
  const Gr = Gs * Gd;
  const Br = Bs * Bd;

  return {
    r: Math.round(Rr * 255),
    g: Math.round(Gr * 255),
    b: Math.round(Br * 255),
  };
}

// 示例用法
const sourceColor = { r: 255, g: 128, b: 0 }; // 橙色
const destinationColor = { r: 0, g: 128, b: 255 }; // 青色
const resultColor = multiplyBlend(sourceColor, destinationColor);

console.log("Source Color:", sourceColor);
console.log("Destination Color:", destinationColor);
console.log("Result Color (Multiply):", resultColor); // 输出结果接近 (0, 64, 0)

表格总结：

操作 公式 效果
Multiply Rr = Rs * Rd 加深颜色，模拟油漆混合效果，黑色颜色分量结果是黑色，白色颜色分量结果是目标颜色。
Gr = Gs * Gd
Br = Bs * Bd

3. Screen 混合模式

screen 混合模式与 multiply 模式相反，它通常用于提亮图像颜色，创建高光效果。

算法描述：

对于源图层 (Rs, Gs, Bs) 和目标图层 (Rd, Gd, Bd)，screen 混合模式的结果像素的 RGB 分量 (Rr, Gr, Br) 计算如下：

  • Rr = 1 – (1 – Rs) * (1 – Rd)
  • Gr = 1 – (1 – Gs) * (1 – Gd)
  • Br = 1 – (1 – Bs) * (1 – Bd)

等价公式：

  • Rr = Rs + Rd – (Rs * Rd)
  • Gr = Gs + Gd – (Gs * Gd)
  • Br = Bs + Bd – (Bs * Bd)

重要说明：

  • 所有颜色分量必须归一化到 0 到 1 的范围内。
  • screen 模式的结果颜色总是比源颜色和目标颜色更亮或者相等。
  • 任何颜色与黑色 (0, 0, 0) 进行 screen 操作，结果都是原始颜色。
  • 任何颜色与白色 (1, 1, 1) 进行 screen 操作，结果都是白色。

JavaScript 代码示例：

function screenBlend(sourceColor, destinationColor) {
  const Rs = sourceColor.r / 255;
  const Gs = sourceColor.g / 255;
  const Bs = sourceColor.b / 255;

  const Rd = destinationColor.r / 255;
  const Gd = destinationColor.g / 255;
  const Bd = destinationColor.b / 255;

  const Rr = 1 - (1 - Rs) * (1 - Rd);
  const Gr = 1 - (1 - Gs) * (1 - Gd);
  const Br = 1 - (1 - Bs) * (1 - Bd);

  return {
    r: Math.round(Rr * 255),
    g: Math.round(Gr * 255),
    b: Math.round(Br * 255),
  };
}

// 示例用法
const sourceColor = { r: 255, g: 128, b: 0 }; // 橙色
const destinationColor = { r: 0, g: 128, b: 255 }; // 青色
const resultColor = screenBlend(sourceColor, destinationColor);

console.log("Source Color:", sourceColor);
console.log("Destination Color:", destinationColor);
console.log("Result Color (Screen):", resultColor); // 输出结果接近 (255, 128, 255)

表格总结：

操作 公式 效果
Screen Rr = 1 – (1 – Rs) * (1 – Rd) 提亮颜色，模拟投影效果，黑色颜色分量结果是目标颜色，白色颜色分量结果是白色。
Gr = 1 – (1 – Gs) * (1 – Gd)
Br = 1 – (1 – Bs) * (1 – Bd)

4. Overlay 混合模式

overlay 混合模式是 multiply 和 screen 模式的结合。它根据目标图层的亮度来决定使用 multiply 还是 screen 模式。如果目标颜色比 50% 灰度（0.5）暗，则使用 multiply 模式；如果目标颜色比 50% 灰度亮，则使用 screen 模式。

算法描述：

对于源图层 (Rs, Gs, Bs) 和目标图层 (Rd, Gd, Bd)，overlay 混合模式的结果像素的 RGB 分量 (Rr, Gr, Br) 计算如下：

  • 如果 Rd <= 0.5，则 Rr = 2 Rs Rd

  • 如果 Rd > 0.5，则 Rr = 1 – 2 (1 – Rs) (1 – Rd)

  • 如果 Gd <= 0.5，则 Gr = 2 Gs Gd

  • 如果 Gd > 0.5，则 Gr = 1 – 2 (1 – Gs) (1 – Gd)

  • 如果 Bd <= 0.5，则 Br = 2 Bs Bd

  • 如果 Bd > 0.5，则 Br = 1 – 2 (1 – Bs) (1 – Bd)

重要说明：

  • 所有颜色分量必须归一化到 0 到 1 的范围内。
  • overlay 模式会使图像的亮部更亮，暗部更暗，从而增加对比度。
  • 目标颜色为 50% 灰度（0.5, 0.5, 0.5）时，结果颜色与源颜色相同。

JavaScript 代码示例：

function overlayBlend(sourceColor, destinationColor) {
  const Rs = sourceColor.r / 255;
  const Gs = sourceColor.g / 255;
  const Bs = sourceColor.b / 255;

  const Rd = destinationColor.r / 255;
  const Gd = destinationColor.g / 255;
  const Bd = destinationColor.b / 255;

  let Rr, Gr, Br;

  Rr = Rd <= 0.5 ? 2 * Rs * Rd : 1 - 2 * (1 - Rs) * (1 - Rd);
  Gr = Gd <= 0.5 ? 2 * Gs * Gd : 1 - 2 * (1 - Gs) * (1 - Gd);
  Br = Bd <= 0.5 ? 2 * Bs * Bd : 1 - 2 * (1 - Bs) * (1 - Bd);

  return {
    r: Math.round(Rr * 255),
    g: Math.round(Gr * 255),
    b: Math.round(Br * 255),
  };
}

// 示例用法
const sourceColor = { r: 255, g: 128, b: 0 }; // 橙色
const destinationColor = { r: 0, g: 128, b: 255 }; // 青色
const resultColor = overlayBlend(sourceColor, destinationColor);

console.log("Source Color:", sourceColor);
console.log("Destination Color:", destinationColor);
console.log("Result Color (Overlay):", resultColor); // 输出结果接近 (0, 128, 255)

表格总结：

操作 公式 效果
Overlay Rr = Rd <= 0.5 ? 2 Rs Rd : 1 – 2 (1 – Rs) (1 – Rd) 根据目标颜色的亮度决定使用 Multiply 或 Screen 模式。目标颜色暗于 50% 灰度时，类似 Multiply；亮于 50% 灰度时，类似 Screen。通常用于增加对比度。
Gr = Gd <= 0.5 ? 2 Gs Gd : 1 – 2 (1 – Gs) (1 – Gd)
Br = Bd <= 0.5 ? 2 Bs Bd : 1 – 2 (1 – Bs) (1 – Bd)

5. 实际应用场景

  • Multiply: 创建阴影效果，例如，将一个图层与一个灰色图层进行 multiply 操作可以创建阴影。还可以用于图像纹理叠加，比如给图片增加木纹效果。
  • Screen: 创建高光效果，例如，将一个图层与一个白色图层进行 screen 操作可以创建高光。可以用来模拟光照效果和金属质感。
  • Overlay: 增强图像对比度，使图像的亮部更亮，暗部更暗。常用于照片编辑和风格化。

6. 性能考量

在实际应用中，特别是处理大量像素时，混合模式的计算可能会影响性能。尽可能利用硬件加速，例如使用 Canvas API 或 WebGL，可以显著提高性能。此外，预先计算一些常用的混合结果并缓存起来也可以减少运行时的计算量。

7. 混合模式的叠加

可以组合使用多个混合模式来达到更复杂的效果。例如，可以先使用 multiply 创建阴影，然后再使用 screen 创建高光，最后使用 overlay 增强对比度。

8. 混合模式的局限性

虽然混合模式可以创建各种有趣的效果，但它们也有一些局限性。例如，某些混合模式可能会导致颜色信息丢失，或者产生不自然的颜色。因此，在选择混合模式时，需要根据具体的应用场景进行权衡。

总结

今天我们深入了解了 multiply、screen 和 overlay 三种 CSS 混合模式的像素级算法。掌握这些算法可以帮助我们更精确地控制图像合成效果，从而创建更具表现力的视觉设计。理解这些算法并结合实际应用，能让开发者更好地驾驭图像处理，创作出更加引人注目的视觉效果。

更多IT精英技术系列讲座，到智猿学院

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注