CIFilter로 사진 필터 구현하기
PolaCard 를 만들면서 가장 중요하게 생각했던것은 '필터' 였습니다.
polaroid card 느낌을 만들어 주기위해서는 사진에 필터를 입히는 방법 말고는 딱히 생각나는게 없었기 때문입니다.
출시 어플을 만들면서 필터를 구현하고 적용하는 과정에대해 한번 상세히 남겨보려 합니다.
오늘은 필터를 적용하고, 다시 이미지 뷰에 선택되는 과정을 집중적으로 알아보도록 하겠습니다.
애플에서 제공해주는 CIFilter 클래스를 이용하고, CIImage 와 filtername 을 넣어주면 필터가 적용됩니다.
1. 이미지 피커를 통해 이미지를 가져오기
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
guard let myImage = info[.originalImage] as? UIImage else { return }
self.newAddedImage.image = myImage
picker.dismiss(animated: true, completion: nil)
}UIImage 를 myImage 로 가져오고, imageView 에 넣어줬습니다.
2. UIImage 를 CIImage 로 변환하고 필터 적용해주기
func filter(_ input: CIImage, filterName: String) -> CIImage? {
let filter = CIFilter(name: filterName)
filter?.setValue(input, forKey: kCIInputImageKey)
return filter?.outputImage
}
func makeFilterImage(userSelectImage: UIImage, filterName: String) -> UIImage? {
let originalCIImage = CIImage(image: userSelectImage)
let filterImage = self.filter(originalCIImage!, filterName: filterName)!
let image2 = UIImage(ciImage: filterImage, scale: userSelectImage.scale, orientation: userSelectImage.imageOrientation)
return image2
}
makeFilterImage 메서드에서 CIImage(image: userSelectImage) 를 사용하면 UIImage를 CIImage로 바꿔줄수 있습니다.
실질적으로 filter 메서드에서 이미지에 필터를 넣어줄수 있는데, filterName 은 String 값으로 넣어줄수 있습니다.
애플에서 지원해주는 필터는 아래링크에서 확인해 보실수 있으니 첨부하도록 하겠습니다~
Core Image Filter Reference
Core Image Filter Reference
developer.apple.com
filter메서드는 CIImage 를 반환해주는 메서드 입니다.
애플공식문서에 따르면 필터를 적용하고 반환값으로 CIFilter 을 가진다 라고 되어있어서 작성한 것인데, 지금 코드를 짠다면 여기서 UIImage 로 변환해서 리턴해줄것 같습니다.
3. 적용한 CIImage를 imageView 에 넣어주기 위해 UIImage 타입으로 변경
이렇게 filter메서드를 통해 제가 선택한 이미지를 CIImage 타입으로 변경하고, 필터처리를 한 CIImage는 makeFIlterImage 메서드에서 image2에서 다시 UIImage 타입으로 바뀌어져 리턴되게 됩니다.
앱에서는 리턴된 UIImage를 하단의 collection view 와 중앙의 imageView 에 넣어주었습니다.
필터 적용하는 방법은 그렇게 어렵지 않으니 관심 있으신 분들은 한번 도전해보시는것도 좋을것 같습니다.