Photo Editing Extension in iOS Mobile App Development

Hepin K

6 min read

·

Nov 2, 2023

--

1

Listen

Share

Achieving optimization through photo editing extension through iOS mobile app development practices.

Press enter or click to view image in full size

Overview:

With the help of Photo Editing Extension, you can edit a photo or video within the Photos app.

In the past, for editing an image, the user had to take an image from the camera and switch to Photo editing apps or import the image from the photos app. Now with the use of this extension, the switching process can be eliminated.

Now Let’s Start to create a project that uses Photo Editing Extension.

Topics:

• Let’s Get Started
• Add Extension
• Run Extension
• Add Photo Editing Functionality
• Testing the App
• Download Source Code

Let’s Get Started

Create a new project, go to the Xcode -> File -> New -> Project, and select App and click on the next button.

Press enter or click to view image in full size

Give the project name “PhotoEditingDemo” click on the next button and create a new project.

Press enter or click to view image in full size

Add Extension

To add a Photo Editing extension, go to the Xcode -> File -> New -> Target and Choose Photo Editing Extension after that click on Next name your extension PhotoEditExt, and click on the Finish button.

Press enter or click to view image in full size

Press enter or click to view image in full size

If you get the below popup then press the Activate button.

Xcode will create a new folder in the project navigator.

Run Extension

Select the PhotoEditExt scheme at the top of Xcode and run the app.

Press enter or click to view image in full size

Now build and run the app you will get the following popup

Choose the Photos app and click on the run.

After the Photos app launches, select the image and click on the Edit button.

You can see the screen below and tap on three dots.

Now you will get a below popup, Select PhotoEditingDemo and you will see the following “Hello Word” Screen.

Now let’s Add our Photo Editing Functionality.

Add Photo Editing Functionality

Download the source code of the complete demo project, The Link is given at the end of this blog.

Inside the project, In the PhotoEditExt folder, you can find the SelectionView and ViewController folders. Copy both folders into your PhotoEditExt folder inside your project.

Here is a quick summary of those files:

1. SelectionView.xib/SelectionView.swift

That contains UI and some functionality like pinch and remove of Selection View.

2. ResizeViews

It is a parent class of the selectionView class.

3. EditImageVC

It contains code and logic for adding effects to images.

It contains code for importing images and fits into the scroll view so you can Zoom In/Out image and slide.

It also has control to add a selection view and add effect on selected portions.

It contains the enum PhotoEffectType for three types of different effects.

Now add the assets from the Complete Demo project to the Assets.xcassets in your project and click on the PhotoEditExt checkbox inside the target Membership hence photo editing extensions can use those files.

Press enter or click to view image in full size

Now in Maininterface.storyboard remove “Hello Word” view controller and copy view controller from complete demo project and paste in your project and make it to initial view controller.

In PhotoEditingViewController.swift file PhotoEditingViewController class conforms to the PHContentEditingController protocol and it has some methods which must be implemented for the class to conform with the protocol.

Here is some explanation of its methods:

• canHandle(_ adjustmentData: PHAdjustmentData) -> Bool

This method is called when a user selects a photo editing extension and returns true or false.

If returned true, a copy of the original image is passed.

If returned false, a copy of the modified image is passed.

• startContentEditing(with contentEditingInput: PHContentEditingInput, placeholderImage: UIImage)

This method is called before the view controller appears and it has two objects PHContentEditingInput which describes an asset to be edited and UIImage which is the original image or past edited image depending on what is returned by the canHandle(_ adjustmentData: PHAdjustmentData) -> Bool method.

• finishContentEditing(completionHandler: @escaping ((PHContentEditingOutput?) -> Void))

This method is called when we are done with our editing. An instance of PHContentEditingOutput is created which contains the edits-related data and passes this instance into completionHandler.

• shouldShowCancelConfirmation: Bool

If it is true, the User can get confirmation to discard changes that should be shown to the user on cancel.

• cancelContentEditing()

This method cleans up temporary files and it is called when the user cancels editing.

Now Open PhotoEditingViewController.swift file and make the EditImageVC class a parent of

PhotoEditingViewController class.

Add the following code into the startContentEditing(with contentEditingInput: PHContentEditingInput, placeholderImage: UIImage) method.

Press enter or click to view image in full size

This method takes input and displays the image on the Editing screen when editing is about to start.

Add the following code into the finishContentEditing(completionHandler: @escaping ((PHContentEditingOutput?) -> Void)) method.

Press enter or click to view image in full size

First, we check if the input is nil then return.

If input is not nil then we create an instance of PHContentEditingOutput using the input object inside DispatchQueue.global().async block.

Editing operations are now applied to the image and convert this into the JPEG data and write this JPEG data to the PHContentEditingOutput instance using the renderedContentURL property.

Now we create an instance of PHAdjustmentData. Adjustment data is saved with a modified image. Adjustment data contains the edits performed on the image and it has a unique identifier and a version number. We assigned this Adjustment data to the output object.

After that, the output object is assigned to the compilation handler. At this point, control will return to the Photos app, and the modified image will appear on the editing screen.

Testing the App

Now build and run your project with the Photos app and select the image for edit.

Click on the Add Effect button and try 3 different types of effects.

After that click on the Done button and your changes will apply and appear on the Photos app.

Download Source Code

You can download the complete source code using this link.

For more information on Photo Editing Extension visit Apple documentation.

Conclusion

We share numerous mobile app development methodologies and guides for Android as well as iOS that will help you explore the toughest challenges and innovative phases. For more content that dives deep into the IT-development practices keep following us, thank you for reading.