iOS：如何修改UIImage局部颜色，实现类似耐克APP鞋子自定义配色效果

你观察到的改色时先模糊再清晰的特征，对应Core Image/Metal 实时渲染的典型表现，并非切换预制图片方案，完整实现思路如下：

• 分层蒙版素材预制
  为鞋款每个可独立改色的部位（鞋头、中底、鞋舌、鞋面等）单独制作同尺寸灰度蒙版，蒙版纯白区域为该部位可改色范围，纯黑为不可改色区域，灰度值对应纹理、光影的过渡透明度。所有蒙版、原始鞋款底图的宽高、锚点完全对齐，改色时不会出现位移。

• 色彩混合渲染逻辑
  用户选中目标颜色后，通过蒙版抠出对应改色区域，使用CIOverlayBlendMode等混合滤镜将目标颜色和底图对应区域做叠加，混合过程会保留原始底图的褶皱、光影、材质纹理，不会出现颜色浮于表面的问题。
  核心实现代码参考：

  // 加载原始鞋款底图
  let baseImage = CIImage(image: UIImage(named: "shoe_base")!)!
  // 加载对应部位蒙版
  let mask = CIImage(image: UIImage(named: "toe_mask")!)!
  // 生成目标颜色层
  let colorLayer = CIImage(color: CIColor(cgColor: selectedColor.cgColor))
    .cropped(to: baseImage.extent)
  // 给颜色层应用蒙版
  guard let maskFilter = CIFilter(name: "CISourceInCompositing", parameters: [
    kCIInputImageKey: colorLayer,
    kCIInputBackgroundImageKey: mask
  ]) else { return }
  // 混合到原始底图
  guard let blendFilter = CIFilter(name: "CIOverlayBlendMode", parameters: [
    kCIInputImageKey: maskFilter.outputImage!,
    kCIInputBackgroundImageKey: baseImage
  ]) else { return }
  // 输出最终图像
  let context = CIContext(options: [.useSoftwareRenderer: false])
  if let cgImage = context.createCGImage(blendFilter.outputImage!, from: baseImage.extent) {
    finalImageView.image = UIImage(cgImage: cgImage)
  }
  

• 模糊过渡效果的逻辑
  改色触发时为了避免高分辨率渲染卡顿，APP会先展示低分辨率的模糊预览图，等后台线程完成全分辨率渲染后再替换为清晰的最终图，这就是你观察到的先模糊后清晰的表现。如果要优化实时改色流畅度，可以提前缓存低精度蒙版用于选色时的实时预览，用户停止操作后再渲染高精度版本，降低渲染延迟。

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