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

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 Retrica photo editor app. Create an app similar to Retrica or you can also say an alternative to Retrica app.



Let’s Get Started with Photo Filters of Photo Editor App like Retrica

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 Retrica camera 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 like retrica filters 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 like Retrica photo editor.

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.


Have an App Idea?

Get your free consultation now

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Your Free Quote