Getting Started

Integration Tutorial#

Requirements#

PhotoEditor SDK requires iOS 9+ and Xcode 12+ with Swift 5.3+. If you have to use older versions of Swift or support older versions of iOS, please have a look at previous versions.

Swift Package Manager#

PhotoEditor SDK is available as a Swift package. If you're new to Swift Package Manager, this Guide will help you to add a dependency to your app. Using the Swift Package Manager is the preferred and simplest way to use PhotoEditor SDK.

To add the PhotoEditor SDK package dependency to your Xcode project, select File > Swift Packages > Add Package Dependency and enter the URL of our build repository:

https://github.com/imgly/pesdk-ios-build

CocoaPods#

PhotoEditor SDK is available via CocoaPods. If you're new to CocoaPods, this Getting Started Guide will help you.

Important: Please make sure that you have a CocoaPods version >= 1.10.0 installed. You can check your version of CocoaPods with pod --version.

Here's what you have to add to your Podfile:

use_frameworks!

pod 'PhotoEditorSDK'

To make sure you're fetching the latest SDK version, run pod repo update. Then run pod install to install the SDK.

License file#

Before using any components of the PhotoEditor SDK, you have to unlock the SDK using your license key file. It is important that you set the license key before using any of the SDK classes.

func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil) -> Bool {
  if let licenseURL = Bundle.main.url(forResource: "license", withExtension: "") {
    PESDK.unlockWithLicense(at: licenseURL)
  }
  return true
}

The license is digitally signed so it can not be altered without becoming invalid. Once you retrieved the license file it can be used to unlock the view controller. The following examples demonstrates how to unlock the SDK.

Manually#

If you prefer not to use CocoaPods, you can integrate PhotoEditor SDK into your project manually via a dynamic framework.

1. Download the SDK here, then simply drag ImglyKit.framework as well as PhotoEditorSDK.framework into the Frameworks, Libraries, and Embedded Content section of your target and make sure that the Embed settings are set to Embed & Sign:

2. Open your project's Build Phases tab and add a new Run Script Phase somewhere below the Embed Frameworks phase. Then copy the following line into the newly created build phase's text field:

bash "$BUILT_PRODUCTS_DIR/$FRAMEWORKS_FOLDER_PATH/ImglyKit.framework/strip-framework.sh"

This script will remove the simulator slices from the universal binary, because Xcode does not allow uploading apps to App Store Connect that contain slices for both, the simulator and for devices.

3. If you are integrating the PhotoEditor SDK into an otherwise Objective-C only project you also have to set the Always Embed Swift Standard Libraries build setting in your project's Build Settings tab to Yes.

4. To receive symbolicated crash logs, you need to include our debug symbols. Copy the ImglyKit.framework.dSYM and PhotoEditorSDK.framework.dSYM file to your project's tree without adding it to any of your targets. Then add the copied file as an input file to the Run Script Phase of step 2.

Our SDK provides two main view controllers. One to work with the camera and the other to edit an image. In the following section, we will first explain how the licensing works and then how the basic view controllers are set up. We will also demonstrate how they can be embedded into a UINavigationController.

UIKit#

Add Import Statement#

You have to add an import statement like this:

import PhotoEditorSDK

Add a CameraViewController#

The CameraViewController class is responsible for displaying an interface to interact with the camera. It provides user interface elements among others to enable the flash, toggle the camera and choose a filter. All you have to do is the following:

let cameraViewController = CameraViewController()
cameraViewController.dataCompletionBlock = { [unowned cameraViewController] data in
  guard let data = data else {
    return
  }

  let photo = Photo(data: data)
  let photoEditViewController = PhotoEditViewController(photoAsset: photo)
  photoEditViewController.delegate = self

  cameraViewController.present(photoEditViewController, animated: true, completion: nil)
}

cameraViewController.completionBlock = { [unowned cameraViewController] image, _ in
  guard let image = image else {
    return
  }

  let photo = Photo(image: image)
  let photoEditViewController = PhotoEditViewController(photoAsset: photo)
  photoEditViewController.delegate = self

  cameraViewController.present(photoEditViewController, animated: true, completion: nil)
}

present(cameraViewController, animated: true, completion: nil)

The CameraViewController has a completionBlock and a dataCompletionBlock property, which must be used to get a reference to the photo and present the editor.

Add a PhotoEditViewController#

The PhotoEditViewController class is responsible for presenting and rendering an image. It can be presented modally in which case it will display a toolbar at the bottom or it can be pushed onto a UINavigationController in which case it will use the navigation controller’s navigation bar. It also handles presentation of PhotoEditToolController subclasses.

To present a PhotoEditViewController just add these few lines:

let sampleImage = UIImage(named: "sample_image")!
let photo = Photo(image: sampleImage)

let photoEditViewController = PhotoEditViewController(photoAsset: photo)
photoEditViewController.delegate = self

present(photoEditViewController, animated: true, completion: nil)

Here, we set the delegate of the photoEditViewController object to self. That means that the presenting view controller must implement the PhotoEditViewControllerDelegate protocol. The methods of the PhotoEditViewControllerDelegate protocol are designed to inform the delegate about the result of the editing process (for example cancellation).

The method that gets called when the user confirms the changes is func photoEditViewController(_ photoEditViewController: PhotoEditViewController, didSave image: UIImage, and data: Data). It provides the resulting image as an UIImage and a Data object. Please note that the EXIF data of the input image is only fully contained within the Data object. Please refer to the export section for more information about EXIF handling.

Embed in an UINavigationController#

The controllers provided with the SDK can be embedded in an UINavigationController. The following code demonstrates how.

let sampleImage = UIImage(named: "sample_image")!
let photo = Photo(image: sampleImage)

let photoEditViewController = PhotoEditViewController(photoAsset: photo)
photoEditViewController.delegate = self

let navigationController = UINavigationController(rootViewController: photoEditViewController)
present(navigationController, animated: true, completion: nil)

SwiftUI#

Add Import Statement#

You have to add an import statement like this:

import PhotoEditorSDK

Add a Camera#

The Camera wraps a CameraViewController for the use in SwiftUI. To use it, all you have to do is:

var body: some View {
  Camera()
    .onDidSave { result in
      // The `Camera` has saved the photo/video.
    }
    .onDidCancel {
      // The `Camera` has been cancelled by the user.
    }
}

In order to access the result of the Camera, simply use the modifiers Camera.onDidCancel and Camera.onDidSave.

Add a PhotoEditor#

The PhotoEditor wraps a PhotoEditViewController for the use in SwiftUI. To display a PhotoEditor, simply add these lines:

var photo = Photo(image: UIImage(named: "sample_image")!)

var body: some View {
  PhotoEditor(photo: photo)
    .onDidSave { result in
      // The `PhotoEditor` has exported the photo.
    }
    .onDidCancel {
      // The `PhotoEditor` has been cancelled by the user.
    }
    .onDidFail {
      // The `PhotoEditor` has failed to export the photo.
    }
}

In order to access the result of the PhotoEditor, simply use the modifiers PhotoEditor.onDidCancel, PhotoEditor.onDidSave, PhotoEditor.onDidFail.

To try these examples, and find out about more options please take a look at the sample project provided in the demo repository .