Chapter 12: Photo Filter App – CoreImage and SwiftUI

What you’ll learn in this chapter:

  • How to access the user’s image gallery using a PHPicker to retrieve and save photos
  • Interfacing with UIKit and integrating UIViewControllers in SwiftUI applications
  • Image processing with CoreImage to create filter effects
  • Practicing ObservableObjects and EnvironmentObjects

What we’ll create 🚀

In this chapter, we will learn how to create a Photo Filter app. The app will contain an Image Picker where the user can choose the photo to edit from his gallery. We will also learn how to use the CoreImage framework to apply custom filters to the selected photo.

This is how our app will look like:

Some preparations

As always, create a new Xcode project and name it “Photo Editor”. 

Then make sure you download the “testImage” and drag it into the Assets folder of your Xcode project.

We also need to create a specific color set we will need later on. To this, right-click below the “testImage” asset and click on “Color Set”. Name this Color Set “LightGray” and choose a dark gray for “Any Appearance” and a light gray for “Dark Appearance”.

To save the edited photos to the user’s image gallery, we will need the user’s permission to access his gallery.

To ask for his permission, we need to customize our app’s Target Properties. To do this, open your project file in the Project Navigator and select the “Info” tab. Next hover over the first entry in the Target Properties section and click on the plus button to add a new key. Use the key “Privacy – Photo Library Additions Usage Description”. As the value, enter the text that should be displayed to the user when asking for his permission, e.g. “Access to your Photo Library is required to edit and save your photos.”.

Note: Before Xcode 13, an Info.plist file was automatically generated for us. We used this file to customize and add our app’s Target Properties. Since Xcode 13, we use the “Info” tab in our project’s settings to do so.

Great, we are now ready to compose the interface of our app!

Leave a Reply

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