【Swift】CIFilterで画像にスッたようなぼかしを入れる

はじめに

以前、CIFilterでぼかしを入れる記事を書きました
今回は前回書いたぼかしとは違った種類のぼかしを画像に適用させてみます。

サンプルアプリ

実装

import SwiftUI

struct ContentView: View {
    private let image = UIImage(named: "sample")!

    @State private var uiImage: UIImage?
    
    @State private var angle: CGFloat = 0.0
    
    @State private var radius: CGFloat = 0.0

    var body: some View {
        ScrollView {
            VStack {
                if let uiImage {
                    Image(uiImage: uiImage)
                        .resizable()
                        .scaledToFit()
                } else {
                    Image(uiImage: image)
                        .resizable()
                        .scaledToFit()
                }

                HStack(spacing: 15) {
                    Button {
                        applyMotionBlurFilter()
                    } label: {
                        Text("適用")
                    }
                    
                    Button {
                        uiImage = nil
                        angle = 0.0
                        radius = 0.0
                    } label: {
                        Text("リセット")
                    }
                }
                
                VStack {
                    Text("angle: \(angle.description)")
                    Slider(value: $angle, in: 0...360)
                }
                
                VStack {
                    Text("radius: \(radius.description)")
                    Slider(value: $radius, in: 0...30)
                }
            }
            .padding(.horizontal, 20)
        }
    }

    func applyMotionBlurFilter() {
        let context = CIContext()
        let inputImage = CIImage(image: image)!

        guard let motionBlurFilter = CIFilter(name: "CIMotionBlur", parameters: [
            kCIInputImageKey: inputImage,
            kCIInputAngleKey: angle,
            kCIInputRadiusKey: radius
        ]) else { return }
        guard let outputImage = motionBlurFilter.outputImage else { return }
        guard let cgImage = context.createCGImage(outputImage, from: outputImage.extent) else { return }
        self.uiImage = UIImage(cgImage: cgImage)
    }
}

おわり

擦れたようなぼかしをかけることができました