Swift中通过滑块调整CIFilter值时应用崩溃问题求助

Swift新手，使用滑块调整CIFilter的intensity（强度）值时应用崩溃。排查到问题出在代码filter.setValue($sliderValue, forKey: kCIInputIntensityKey)处：去掉$则无法实时更新滤镜图像，想了解实时更新滤镜图像的正确方法。

相关代码：

import SwiftUI
import CoreImage
import CoreImage.CIFilterBuiltins

struct ImagePicker: UIViewControllerRepresentable {
    @Environment(\.presentationMode) var presentationMode
    @Binding var image:UIImage?
    var selectedSource: UIImagePickerController.SourceType
    
    func makeUIViewController(context: Context) -> UIImagePickerController {
        let picker = UIImagePickerController()
        picker.sourceType = selectedSource
        picker.delegate = context.coordinator
        return picker
    }
    
    func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {
    }
    func makeCoordinator() -> Coordinator {
        Coordinator(parent:self)
    }
    class Coordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate {
        let parent: ImagePicker
        init(parent: ImagePicker) {
            self.parent = parent
        }
        
        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            if let uiImage = info[.originalImage] as? UIImage {
                parent.image = uiImage
            }
            parent.presentationMode.wrappedValue.dismiss()
        }
    }
}

struct ContentView: View {
    
    @State private var image: UIImage? = nil
    @State private var showingImagePicker = false
    @State private var selectedImageSource = UIImagePickerController.SourceType.photoLibrary
    @State private var placeHolderImage = Image("")
    @State private var filteredImage = Image("")
    @State private var sliderValue: Double = 10.0
    
    let context = CIContext()
    let filter = CIFilter.sepiaTone()
    
    var body: some View {

        
        VStack {
            placeHolderImage
                .resizable()
                .aspectRatio(contentMode: .fit)
//                .frame(width: abs(400), height: abs(350))
            Spacer()
            filteredImage
                .resizable()
                .aspectRatio(contentMode: .fit)
//                .frame(width: abs(400), height: abs(350))
            
            Spacer()
            VStack {
                Slider(value: $sliderValue, in: 0...20)
                HStack {
                    Button("Camera") {
                        selectedImageSource = .camera
                        showingImagePicker = true
                    }
                    .frame(maxWidth: .infinity)
                    
                    
                    Button("Library") {
                        selectedImageSource = .photoLibrary
                        showingImagePicker = true
                    }
                    .frame(maxWidth: .infinity)
                    
                    
                    Button("SepiaTone") {
                        filter.setValue($sliderValue, forKey: kCIInputIntensityKey)
                        if let cgi = image!.cgImage {
                            let ciImage = CIImage(cgImage: cgi)
                            filter.inputImage=ciImage
                            guard let outputImage = filter.outputImage else {return}
                            if let cgimg = context.createCGImage(outputImage, from: outputImage.extent) {
                                let uiImage = UIImage(cgImage: cgimg)
                                filteredImage = Image(uiImage: uiImage)
                            }else {
                                print("Failed to create CGImage")
                            }
                        }
                    }
                    .frame(maxWidth: .infinity)
                }
                
            }
        }.sheet(isPresented: $showingImagePicker, onDismiss: {
            placeHolderImage = (image == nil) ? Image("") : Image(uiImage: image!)
            
        })
        {
            ImagePicker(image: self.$image, selectedSource: selectedImageSource)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

模拟器报错信息：

CoreSimulator 857.13 - Device: iPhone 14 Pro (11877198-13B9-4683-9863-774756C33AD0) - Runtime: iOS 16.1 (20B72) - DeviceType: iPhone 14 Pro
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__SwiftValue doubleValue]: unrecognized selector sent to instance

崩溃原因 #

$sliderValue是SwiftUI的Binding类型，而CIFilter.setValue(_:forKey:)需要的是具体的数值类型（比如Double）。把Binding对象传给CIFilter，它无法识别这个类型，就会抛出unrecognized selector异常。

实时更新滤镜的正确方式 #

SwiftUI里实现实时更新，不需要手动点击按钮触发，而是监听sliderValue的变化，自动重新计算滤镜图像。推荐两种方式：

方式1：使用.onChange修饰符监听滑块值变化

直接在滑块或者视图上添加.onChange，每当sliderValue改变时自动更新滤镜：

Slider(value: $sliderValue, in: 0...1)
    .onChange(of: sliderValue) { newValue in
        updateFilteredImage()
    }

方式2：将滤镜图像做成计算属性（更简洁的SwiftUI风格）

把filteredImage改成计算属性，依赖image和sliderValue，这样只要这两个值变化，就会自动重新计算。

额外注意事项 #

1. SepiaTone滤镜的intensity参数正常范围是0到1（0无效果，1最深棕褐色），你设置的0-20会导致效果异常，建议调整滑块范围。
2. 不要强制解包image!，用可选绑定避免崩溃。
3. CIFilter最好不要作为全局let，每次参数变化时重新创建或者重置，避免状态残留。

修改后的完整代码 #

import SwiftUI
import CoreImage
import CoreImage.CIFilterBuiltins

struct ImagePicker: UIViewControllerRepresentable {
    @Environment(\.presentationMode) var presentationMode
    @Binding var image: UIImage?
    var selectedSource: UIImagePickerController.SourceType
    
    func makeUIViewController(context: Context) -> UIImagePickerController {
        let picker = UIImagePickerController()
        picker.sourceType = selectedSource
        picker.delegate = context.coordinator
        return picker
    }
    
    func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate {
        let parent: ImagePicker
        init(parent: ImagePicker) {
            self.parent = parent
        }
        
        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            if let uiImage = info[.originalImage] as? UIImage {
                parent.image = uiImage
            }
            parent.presentationMode.wrappedValue.dismiss()
        }
    }
}

struct ContentView: View {
    @State private var image: UIImage? = nil
    @State private var showingImagePicker = false
    @State private var selectedImageSource = UIImagePickerController.SourceType.photoLibrary
    @State private var sliderValue: Double = 0.5 // 初始值设为0-1范围内的中间值
    
    let context = CIContext()
    
    // 计算属性：自动根据image和sliderValue生成滤镜图像
    private var filteredImage: Image {
        guard let image = image, let cgImage = image.cgImage else {
            return Image("") // 没有图片时显示空占位
        }
        
        let ciImage = CIImage(cgImage: cgImage)
        let filter = CIFilter.sepiaTone()
        filter.inputImage = ciImage
        filter.intensity = sliderValue // 直接用sliderValue，不需要Binding
        
        guard let outputImage = filter.outputImage,
              let outputCGImage = context.createCGImage(outputImage, from: outputImage.extent) else {
            return Image(uiImage: image) // 滤镜处理失败返回原图
        }
        
        return Image(uiImage: UIImage(cgImage: outputCGImage))
    }
    
    var body: some View {
        VStack {
            // 显示原图
            if let image = image {
                Image(uiImage: image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
            } else {
                Text("请选择图片")
                    .frame(height: 350)
            }
            
            Spacer()
            
            // 显示滤镜处理后的图片
            filteredImage
                .resizable()
                .aspectRatio(contentMode: .fit)
            
            Spacer()
            
            VStack {
                // 滑块范围改为0-1，符合SepiaTone的参数要求
                Slider(value: $sliderValue, in: 0...1)
                    .padding()
                
                HStack {
                    Button("相机") {
                        selectedImageSource = .camera
                        showingImagePicker = true
                    }
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
                    
                    Button("相册") {
                        selectedImageSource = .photoLibrary
                        showingImagePicker = true
                    }
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
                }
            }
        }
        .sheet(isPresented: $showingImagePicker) {
            ImagePicker(image: $image, selectedSource: selectedImageSource)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

代码说明 #

1. 移除了手动触发的SepiaTone按钮，滑块拖动时自动更新滤镜图像。
2. 将filteredImage改为计算属性，依赖image和sliderValue，状态变化时自动重新计算。
3. 修正了SepiaTone的intensity参数范围为0-1，效果更合理。
4. 移除了强制解包image!，用可选绑定处理空值情况，避免崩溃。
5. 每次计算滤镜时重新创建CIFilter对象，避免旧参数残留。

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