将 sepiaTone 应用于 swiftui 中的照片到滚动视图对象中

Question

下面的 swiftui 代码应该对当前照片应用 sephia.tone 滤镜，为此我使用了下面的代码但没有应用滤镜，谁能向我解释问题出在哪里？当我点击棕褐色时，我调用了应用 CiFilter 的函数，这是因为什么？因为过滤器应用不正确

Swift UI 代码:

import SwiftUI
import CoreImage
import CoreImage.CIFilterBuiltins

    //BoxImage filter ui
    struct BoxImage{
        var id:Int
        let title,imageurl:String
    }
    
    //BoxView filter ui
    struct BoxView:View{
        let box:BoxImage
        
        var body: some View{
            VStack{
                Image("\(box.imageurl)").resizable().cornerRadius(12).frame(width: 80, height: 80 )
                Text(box.title).font(.subheadline).fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
            }
        }
        
    }
    
    struct FilterUiView: View {
        
        //Setup filter
        @State private var currentFilter = CIFilter.sepiaTone()
        let context = CIContext()
        
        @Environment(\.presentationMode) var mode: Binding<PresentationMode>
        
        @State var imageselected:Image=Image("Geometry")
    
        
    
        @State var showImagePicker: Bool = false
        @State private var showingSheet = false
       
        
        func applyProcessing() {
         
            guard let outputImage = currentFilter.outputImage else { return }
    
            if let cgimg = context.createCGImage(outputImage, from: outputImage.extent) {
                let uiImage = UIImage(cgImage: cgimg)
                self.imageselected = Image(uiImage: uiImage)
                
                print("Tono seppia")
            }
            
            print("processo tono seppia")
        }
        
        var body: some View {
            
            VStack {
                Text("Filter")
                    .font(.system(size: 25, weight: .bold, design: .serif))
                    .foregroundColor(Color(#colorLiteral(red: 0.3411764801, green: 0.6235294342, blue: 0.1686274558, alpha: 1)))
                    .padding(.top, 5)
                Spacer()
                Spacer()
                Spacer()
                VStack{
                imageselected
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .cornerRadius(10)
                    .overlay(RoundedRectangle(cornerRadius: 10)
                                .stroke(Color.green, lineWidth: 4))
                    .shadow(radius: 10).onTapGesture {
                        self.showImagePicker.toggle()
                    }
            }.sheet(isPresented: $showImagePicker) {
                        ImagePicker(sourceType: .photoLibrary) { image in
                            self.imageselected = Image(uiImage: image)
                                        }
                    }
                
    
                Spacer()
                Spacer()
                Spacer()
                
                VStack {
                    ScrollView(.horizontal){
                        HStack(spacing: 20) {
                            BoxView(box:  BoxImage(id: 0, title: "Sepia", imageurl: "sepia")).onTapGesture {
                               applyProcessing()
                            }
                            BoxView(box:  BoxImage(id: 1, title: "Model", imageurl: "Abstract"))
                            BoxView(box: BoxImage(id: 2,title: "Modify ui",imageurl: "Aj"))
                            BoxView(box: BoxImage(id: 4,title: "Modify ui",imageurl: "Aj"))
                            BoxView(box: BoxImage(id: 5,title: "Modify2i",imageurl: "Aj"))
                            BoxView(box: BoxImage(id: 6,title: "Modify2i",imageurl: "Aj"))
                            
                        }
                    }
                    
                 
                    
                }
                
            }.background(Color.white).navigationBarHidden(true)
    
        }
       
    }

Answer 1

您需要为过滤器设置输入图像并处理Image和UImage

之间的互操作

import SwiftUI
import CoreImage
import CoreImage.CIFilterBuiltins

    //BoxImage filter ui
    struct BoxImage{
        var id:Int
        let title,imageurl:String
    }
    
    //BoxView filter ui
    struct BoxView:View{
        let box:BoxImage
        
        var body: some View{
            VStack{
                Image("\(box.imageurl)").resizable().cornerRadius(12).frame(width: 80, height: 80 )
                Text(box.title).font(.subheadline).fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
            }
        }
        
    }
    
    struct FilterUiView: View {
        
        //Setup filter
        @State private var currentFilter = CIFilter.sepiaTone()
        let context = CIContext()
        
        @Environment(\.presentationMode) var mode: Binding<PresentationMode>
        
        @State var imageselected:UIImage?
     
        @State var showImagePicker: Bool = false
        @State private var showingSheet = false
       
        
        func applyProcessing() {
              
            guard let cgimg = imageselected?.cgImage else {
                print("imageView doesn't have an image!")
                return
            }
 
            let coreImage = CIImage(cgImage: cgimg)
 
            currentFilter.setValue(coreImage, forKey: kCIInputImageKey)
            
            
            guard let outputImage = currentFilter.outputImage else { return }
    
            if let cgimg = context.createCGImage(outputImage, from: outputImage.extent) {
                let uiImage = UIImage(cgImage: cgimg)
                self.imageselected =  uiImage
                
                print("Tono seppia")
            }
            
            print("processo tono seppia")
        }
        
        var body: some View {
            
            VStack {
                Text("Filter")
                    .font(.system(size: 25, weight: .bold, design: .serif))
                    .foregroundColor(Color(#colorLiteral(red: 0.3411764801, green: 0.6235294342, blue: 0.1686274558, alpha: 1)))
                    .padding(.top, 5)
                Spacer()
                Spacer()
                Spacer()
                VStack{
                    if imageselected == nil {
                        Image("Geometry")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .cornerRadius(10)
                            .overlay(RoundedRectangle(cornerRadius: 10)
                                        .stroke(Color.green, lineWidth: 4))
                            .shadow(radius: 10).onTapGesture {
                                self.showImagePicker.toggle()
                            }
                    }
                    else {
                        Image(uiImage: imageselected! )
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .cornerRadius(10)
                            .overlay(RoundedRectangle(cornerRadius: 10)
                                        .stroke(Color.green, lineWidth: 4))
                            .shadow(radius: 10).onTapGesture {
                                self.showImagePicker.toggle()
                            }
                    }

            }.sheet(isPresented: $showImagePicker) {
                        ImagePicker(sourceType: .photoLibrary) { image in
                            self.imageselected =   image
                                       
                        }
                    }
                
    
                Spacer()
                Spacer()
                Spacer()
                
                VStack {
                    ScrollView(.horizontal){
                        HStack(spacing: 20) {
                            BoxView(box:  BoxImage(id: 0, title: "Sepia", imageurl: "sepia")).onTapGesture {
                               applyProcessing()
                            }
                            BoxView(box:  BoxImage(id: 1, title: "Model", imageurl: "Abstract"))
                            BoxView(box: BoxImage(id: 2,title: "Modify ui",imageurl: "Aj"))
                            BoxView(box: BoxImage(id: 4,title: "Modify ui",imageurl: "Aj"))
                            BoxView(box: BoxImage(id: 5,title: "Modify2i",imageurl: "Aj"))
                            BoxView(box: BoxImage(id: 6,title: "Modify2i",imageurl: "Aj"))
                            
                        }
                    }
                    
                 
                    
                }
                
            }.background(Color.white).navigationBarHidden(true)
    
        }
       
    }



public struct ImagePicker: UIViewControllerRepresentable {

    private let sourceType: UIImagePickerController.SourceType
    private let onImagePicked: (UIImage) -> Void
    @Environment(\.presentationMode) private var presentationMode

    public init(sourceType: UIImagePickerController.SourceType, onImagePicked: @escaping (UIImage) -> Void) {
        self.sourceType = sourceType
        self.onImagePicked = onImagePicked
    }

    public func makeUIViewController(context: Context) -> UIImagePickerController {
        let picker = UIImagePickerController()
        picker.sourceType = self.sourceType
        picker.delegate = context.coordinator
        return picker
    }

    public func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {}

    public func makeCoordinator() -> Coordinator {
        Coordinator(
            onDismiss: { self.presentationMode.wrappedValue.dismiss() },
            onImagePicked: self.onImagePicked
        )
    }

    final public class Coordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate {

        private let onDismiss: () -> Void
        private let onImagePicked: (UIImage) -> Void

        init(onDismiss: @escaping () -> Void, onImagePicked: @escaping (UIImage) -> Void) {
            self.onDismiss = onDismiss
            self.onImagePicked = onImagePicked
        }

        public func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any]) {
            if let image = info[.originalImage] as? UIImage {
                self.onImagePicked(image)
            }
            self.onDismiss()
        }

        public func imagePickerControllerDidCancel(_: UIImagePickerController) {
            self.onDismiss()
        }

    }

}

之前

之后

将 sepiaTone 应用于 swiftui 中的照片到滚动视图对象中

Apply sepiaTone to photos in swiftui into scrollview object

ios

swift

swiftui

photo