使用.blur(radius:)时如何避免图像模糊后边缘透明？

方法1：扩展图像边缘并填充背景 #

模糊算法会采样图像边缘外的区域，默认这些区域是透明的，导致边缘变透。你可以先给图像添加等于模糊半径的内边距，再用原图像作为背景填充这个扩展区域，最后裁剪回原尺寸再应用模糊：

struct BlurWithoutTransparentEdges: View {
    @State private var blurAmount: CGFloat = 0
    
    var body: some View {
        Image("your-image")
            .resizable()
            .scaledToFit()
            .padding(blurAmount)
            .background(
                Image("your-image")
                    .resizable()
                    .scaledToFill()
            )
            .clipped()
            .blur(radius: blurAmount)
            .overlay(Slider(value: $blurAmount, in: 0...30))
    }
}

原理是让模糊采样时能取到和边缘一致的像素，避免透明区域被采样。

方法2：用Core Image滤镜设置边缘处理 #

如果使用Core Image的CIGaussianBlur，可以通过设置kCIInputExtentKey扩展滤镜处理范围，让算法在边缘外采样时重复原图像的边缘像素：

import CoreImage
import CoreImage.CIFilterBuiltins

func applyBlurToImage(_ image: UIImage, radius: CGFloat) -> UIImage? {
    guard let ciImage = CIImage(image: image) else { return nil }
    
    let blurFilter = CIFilter.gaussianBlur()
    blurFilter.inputImage = ciImage
    blurFilter.radius = radius
    
    // 扩展处理范围，确保模糊采样覆盖边缘外区域
    let extent = ciImage.extent.insetBy(dx: -radius, dy: -radius)
    blurFilter.setValue(CIVector(cgRect: extent), forKey: kCIInputExtentKey)
    
    guard let outputCIImage = blurFilter.outputImage else { return nil }
    let context = CIContext(options: [.useSoftwareRenderer: false])
    guard let outputCGImage = context.createCGImage(outputCIImage, from: ciImage.extent) else { return nil }
    
    return UIImage(cgImage: outputCGImage)
}

方法3：视图背景模糊（针对SwiftUI视图） #

如果是给视图而非单独图像加模糊，可以把模糊后的图像作为背景填充整个视图区域，再裁剪：

YourTargetView()
    .background(
        Image("your-image")
            .resizable()
            .scaledToFill()
            .blur(radius: blurAmount)
    )
    .clipped()

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