多图层合成与混合模式

合成（compositing）指把多张图片放在一起，并定义它们在重叠区域的像素如何相互作用。这种交互由**混合模式（blend mode）**控制：over 利用 Alpha 把上层图片覆盖到下层；multiply 按通道相乘，使两层都保持可见。本 Recipe 把半透明 WebP Cloud 标识叠加到照片中央，导出两次——一次用 over，一次用 multiply——产物均为 WebP。

输入

基底是输入照片；叠加层是程序生成的 WebP Cloud 标识，居中放置。

作为合成基底使用的苏州东方之门夜景照片 — **基底 · JPEG**1938 × 1292，3 通道

WebP Cloud 叠加层 · SVG220 × 72，透明背景

使用 Over 混合

over 是默认也最常见的模式：叠加层在 Alpha 非零处替换下面的像素。将 WebP Cloud 标识居中，便于各变体之间对齐对比。

中央叠加 WebP Cloud 标识的苏州东方之门夜景照片 — **Over 混合 · WEBP**1938 × 1292, 397,690 bytes, 3 bands

Generated with govips v2.19.0 / libvips 8.17.3.

base, err := vips.NewImageFromFile(inputPath)
if err != nil {
    return err
}
overlay, err := vips.NewImageFromFile(overlayPath)
if err != nil {
    return err
}
if err := overlay.PremultiplyAlpha(); err != nil {
    return err
}
x := (base.Width() - overlay.Width()) / 2
y := (base.Height() - overlay.Height()) / 2
if err := base.Composite(overlay, vips.BlendModeOver, x, y); err != nil {
    return err
}
if err := base.Flatten(&vips.Color{R: 29, G: 45, B: 53}); err != nil {
    return err
}
data, _, err := base.ExportWebp(vips.NewWebpExportParams())

await sharp('input.jpg')
  .composite([{ input: 'watermark-logo.svg', gravity: 'centre', blend: 'over' }])
  .flatten({ background: '#1d2d35' })
  .webp({ quality: 82 })
  .toFile('composite-over.webp');

base = pyvips.Image.new_from_file("input.jpg")
overlay = pyvips.Image.new_from_file("watermark-logo.svg")
x = (base.width - overlay.width) // 2
y = (base.height - overlay.height) // 2
result = base.composite2(overlay, "over", x=x, y=y)
result.write_to_file("composite-over.webp", Q=82)

vips composite2 input.jpg watermark-logo.svg 'composite-over.webp[Q=82]' over --x "$X" --y "$Y"

使用 Multiply 混合

multiply 把一张图片的每个通道乘以另一张图片的对应通道，因此重叠区域仍保持可见并变暗。注意同样的叠加层在 multiply 下与 over 产生了不同的视觉效果。

WebP Cloud 标识以 Multiply 模式融入中央的苏州东方之门夜景照片 — **Multiply 混合 · WEBP**1938 × 1292, 397,690 bytes, 3 bands

Generated with govips v2.19.0 / libvips 8.17.3.

base, err := vips.NewImageFromFile(inputPath)
if err != nil {
    return err
}
overlay, err := vips.NewImageFromFile(overlayPath)
if err != nil {
    return err
}
if err := overlay.PremultiplyAlpha(); err != nil {
    return err
}
x := (base.Width() - overlay.Width()) / 2
y := (base.Height() - overlay.Height()) / 2
if err := base.Composite(overlay, vips.BlendModeMultiply, x, y); err != nil {
    return err
}
if err := base.Flatten(&vips.Color{R: 29, G: 45, B: 53}); err != nil {
    return err
}
data, _, err := base.ExportWebp(vips.NewWebpExportParams())

await sharp('input.jpg')
  .composite([{ input: 'watermark-logo.svg', gravity: 'centre', blend: 'multiply' }])
  .flatten({ background: '#1d2d35' })
  .webp({ quality: 82 })
  .toFile('composite-multiply.webp');

base = pyvips.Image.new_from_file("input.jpg")
overlay = pyvips.Image.new_from_file("watermark-logo.svg")
x = (base.width - overlay.width) // 2
y = (base.height - overlay.height) // 2
result = base.composite2(overlay, "multiply", x=x, y=y)
result.write_to_file("composite-multiply.webp", Q=82)

vips composite2 input.jpg watermark-logo.svg 'composite-multiply.webp[Q=82]' multiply --x "$X" --y "$Y"

各 binding 的混合模式命名不同

混合模式的基础集合来自 libvips 的 VipsBlendMode 枚举，但各 binding 的呈现方式不同：

govips 使用类型化的 Go 常量：vips.BlendModeOver、vips.BlendModeMultiply。
sharp 使用小写字符串：'over'、'multiply'，以及另外 20 余种。
pyvips 在 composite2 中接受字符串模式："over"、"multiply"。
vips CLI 把同一枚举名作为第四个位置参数。

由于这些模式映射到同一底层枚举，产品意图是可移植的；但不能把一个 binding 里的模式名直接复制到另一个 binding 而不做映射。站点的 op-mapping 与 default-differences 页面会追踪这些重命名。