图层合成基础 - 混合模式完全指南与实用技巧
图层合成基础 - Alpha 通道与透明度
图层合成是将多个图像层按特定规则叠加为最终图像的过程。Alpha 通道控制每个像素的透明度,是合成的基础。
Alpha 合成(Porter-Duff):
- Over 操作:最常用的合成操作。前景覆盖在背景上,按 Alpha 值混合
- 公式:
result = fg * fg_alpha + bg * (1 - fg_alpha) - 预乘 Alpha:颜色值预先乘以 Alpha,避免合成时的边缘伪影。专业软件和 GPU 渲染使用预乘格式
合成顺序:图层从下到上依次合成。顺序不同结果不同(合成不满足交换律)。
基本混合模式 - 正片叠底、滤色、叠加
混合模式定义上层像素与下层像素的数学运算关系。不同模式产生截然不同的视觉效果。
变暗类:
- 正片叠底(Multiply):
result = a * b。两层相乘,结果总是更暗。白色透明,黑色不变。用于添加阴影、合成纹理 - 颜色加深(Color Burn):增加对比度的变暗。效果比正片叠底更强烈
变亮类:
- 滤色(Screen):
result = 1 - (1-a) * (1-b)。正片叠底的反转,结果总是更亮。黑色透明,白色不变。用于添加光效、高光 - 颜色减淡(Color Dodge):增加对比度的变亮。产生强烈的高光效果
对比类:
- 叠加(Overlay):暗区正片叠底,亮区滤色。增强对比度同时保持中间调。最常用的增强模式
- 柔光(Soft Light):类似叠加但效果更柔和。适合微调对比度和色调
高级混合模式 - 差值、色相、亮度
高级混合模式提供更特殊的效果,用于色彩校正、特效创作和图像分析。
差值类:
- 差值(Difference):
result = |a - b|。显示两层的差异。相同区域为黑色。用于图像对齐验证和特效 - 排除(Exclusion):类似差值但对比度更低,中间调变灰
HSL 类:
- 色相(Hue):使用上层的色相,保持下层的饱和度和亮度。用于改变颜色而不影响明暗
- 饱和度(Saturation):使用上层的饱和度,保持下层的色相和亮度
- 颜色(Color):使用上层的色相和饱和度,保持下层的亮度。用于着色(如黑白照片上色)
- 亮度(Luminosity):使用上层的亮度,保持下层的色相和饱和度。用于亮度调整而不改变颜色
CSS 和 Canvas 中的混合模式实现
Web 平台通过 CSS mix-blend-mode 和 Canvas globalCompositeOperation 支持混合模式。
CSS 混合模式:
mix-blend-mode:元素与其下方内容的混合方式background-blend-mode:元素多个背景层之间的混合方式- 支持所有标准混合模式:multiply、screen、overlay、darken、lighten 等
Canvas 实现:
ctx.globalCompositeOperation = "multiply"- 设置后,后续绑制的内容都使用该混合模式
- 支持 Porter-Duff 操作(source-over、destination-out 等)和混合模式
实用示例:
- 文字与背景图混合:
h1 { mix-blend-mode: overlay; } - 图像着色:彩色叠加层 + multiply 模式
- 暗角效果:径向渐变 + multiply 模式
实用合成技巧 - 照片编辑中的应用
混合模式在照片编辑中有大量实用技巧,可以快速实现复杂的调整效果。
常用技巧:
- 增强对比度:复制图层 → Overlay 模式 → 降低不透明度。快速增强对比度
- 锐化:高通滤波图层 → Overlay 模式。仅增强边缘而不影响平坦区域
- 柔焦效果:模糊复制层 → Screen 模式 → 低不透明度。产生梦幻柔光效果
- 去除色偏:纯色填充层(互补色)→ Color 模式 → 低不透明度
- 局部提亮/压暗:50% 灰色图层 → Overlay 模式 → 用白色/黑色画笔绘制(Dodge & Burn)
性能考虑与 GPU 加速
图层合成是计算密集型操作,特别是多层高分辨率图像的实时合成。GPU 加速是关键。
性能优化:
- GPU 合成:现代浏览器和图像编辑器使用 GPU 进行图层合成。CSS 混合模式由 GPU 合成器处理
- 减少图层数:合并不需要独立编辑的图层,减少合成计算量
- 区域更新:仅重新合成变化区域而非整张图像
- 分辨率管理:编辑时使用代理分辨率,最终输出时才用全分辨率合成
WebGL/WebGPU 实现:
- 片段着色器中实现混合模式,每像素并行计算
- 多图层合成可通过多 pass 渲染或 MRT(Multiple Render Targets)实现
- 帧缓冲对象(FBO)存储中间合成结果