如何在iOS 13下实现类似WWDC分割效果的图像与蒙版融合？

参考 WWDC2021 视频 12:20 的分割效果，我在 iOS 13 上编写了如下代码，但融合结果不符合预期：

func blendImages(
    background: CIImage,
    mask: CIImage,
    isRedMask: Bool = true
) -> CIImage? {

    print("blendImages")
    print(foreground.extent.size)
    print(mask.extent.size)
    // scale mask
    let maskScaleX = foreground.extent.width / mask.extent.width
    let maskScaleY = foreground.extent.height / mask.extent.height
    let maskScaled = mask.transformed(by: __CGAffineTransformMake(maskScaleX, 0, 0, maskScaleY, 0, 0))

    let blendFilter = isRedMask ? CIFilter.blendWithRedMask() : CIFilter.blendWithMask()
    blendFilter.inputImage = foreground
    blendFilter.maskImage = maskScaled

    return blendFilter.outputImage
}

• 前景图：
  

• 蒙版图（与前景图比例相同但尺寸不同）：
  

• 融合结果（ImageView背景色为蓝色）：
  

请问如何在 iOS 13 环境下实现类似 WWDC 分割效果的图像与蒙版融合？

解决方法 #

1. 修正参数与变量不匹配问题
   函数参数定义的是background，但代码中使用了未声明的foreground变量，这是核心错误。需将参数改为foreground，或把代码中所有foreground替换为background，确保输入图像正确传递。

2. 优化蒙版缩放逻辑
   替换不安全的__CGAffineTransformMake，用标准的CGAffineTransform缩放方法，同时保证蒙版缩放后与前景图范围完全对齐：

   let maskScaled = mask.transformed(by: CGAffineTransform(scaleX: maskScaleX, y: maskScaleY))
   

3. 适配蒙版通道逻辑

   • 若使用红色蒙版（blendWithRedMask），需确保蒙版的红色通道为有效遮罩层，其他通道无干扰；如果是灰度蒙版，建议先转成红色通道专属蒙版。
   • 更通用的方案是用灰度蒙版转 Alpha 通道，再结合sourceInCompositing滤镜实现精准混合：

     // 将灰度蒙版转为Alpha通道
     let alphaMask = mask.applyingFilter("CIMaskToAlpha")
     // 缩放蒙版到前景图尺寸
     let scaledMask = alphaMask.transformed(by: CGAffineTransform(scaleX: maskScaleX, y: maskScaleY))
     // 使用sourceIn混合，蒙版白色区域显示前景，黑色区域显示背景
     let blendFilter = CIFilter.sourceInCompositing()
     blendFilter.inputImage = foreground
     blendFilter.backgroundImage = background
     blendFilter.maskImage = scaledMask
     

4. 修正输出图像范围
   融合后的图像可能存在范围偏移，返回前裁剪到前景图的范围：

   return blendFilter.outputImage?.cropped(to: foreground.extent)
   

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