iOS Tutorial: Make a Photo Editor App Like Retrica [Part 2]

iOS Tutorial: Make a Photo Editor App Like Retrica [Part 2]
1 (20%) 1 vote

iOS Tutorial: How To Make A Photo Editor App Like Retrica

In the first part of this tutorial series, you learned how to use UIImagePickerController to capture a photo as well as how to access the photo library to allow users to select the photos. After selecting the photo, we also enabled the photo cropping feature.

Today, in the second part, we’ll learn how to apply filters on selected images in your photo editor app.



Let’s Get Started with Photo Filters

1. Define CIContext and CIFilter to Apply Filter on Selected Image

var context: CIContext = CIContext(options: nil)
var appliedFilter: CIFilter!

2. Create an Action Sheet and Set Filters

//Open popup for filters type
@IBAction func actionFilter(sender: AnyObject) {
let actionSheet = UIAlertController(title: "Choose filter", message: nil, preferredStyle: .ActionSheet)

actionSheet.addAction(UIAlertAction(title: "CIVignette", style: .Default, handler: handleFilterSelection))
actionSheet.addAction(UIAlertAction(title: "CIVignetteEffect", style: .Default, handler: handleFilterSelection))

actionSheet.addAction(UIAlertAction(title: "Cancel", style: .Cancel, handler: nil))
presentViewController(actionSheet, animated: true, completion: nil)

3. When Action Sheet will Open You can Select Filter Option and Handle Selected Action from Here

func handleFilterSelection(action: UIAlertAction!) {
appliedFilter = CIFilter(name: action.title!)

let beginImage = CIImage(image: imgView.image!)
appliedFilter.setValue(beginImage, forKey: kCIInputImageKey)


func applyFilter() {
let inputKeys = appliedFilter.inputKeys
let intensity = 0.5

if inputKeys.contains(kCIInputIntensityKey) { appliedFilter.setValue(intensity, forKey: kCIInputIntensityKey) }
if inputKeys.contains(kCIInputRadiusKey) { appliedFilter.setValue(intensity * 200, forKey: kCIInputRadiusKey) }
if inputKeys.contains(kCIInputScaleKey) { appliedFilter.setValue(intensity * 10, forKey: kCIInputScaleKey) }
if inputKeys.contains(kCIInputCenterKey) { appliedFilter.setValue(CIVector(x: imgView.image!.size.width / 2, y: imgView.image!.size.height / 2), forKey: kCIInputCenterKey) }

let cgImage = context.createCGImage(appliedFilter.outputImage!, fromRect: appliedFilter.outputImage!.extent)
let filteredImage = UIImage(CGImage: cgImage)

self.imgView.image = filteredImage

intensity should be managed by slider view.

4. ApplyFilter() will Apply Filter on Image and Provide Resultant Image.

After implementing this code, run your app on either simulator or physical device. If everything runs smooth, you’ll be able to select one image, crop it, and apply photo filter as per your needs.

See this Short Demo Video:

If you’ve followed the exact process given in this iOS app tutorial, you can also apply photo filter to the images.

If you face any problem while performing this tutorial, you can contact our iOS developers to solve your errors, as our highly experienced developer team has developed many photo editing apps.

So, if you want to hire a mobile app development company to add some new features or develop a photo editor apps like Prisma, FaceTune, and PicSart from scratch, contact us now.

We have uploaded the entire source code on GitHub. If you want to download the entire source code, click the button below.