Using the Photo Editor

Photo Editor is built to provide versatile photo editing capabilities. Toggling from edit and preview modes enables users to evaluate their edited photo before export. A dock at the bottom of the editor provides quick access to the most essential photo editing tools allowing users to tweak adjustments, crop the photo, and add filters, effects, blur, text, shapes, as well as stickers.

In this example, we will show you how to initialize the Photo Editor solution for the mobile editor on iOS.

The mobile editor is implemented entirely with SwiftUI and this example assumes that you also use SwiftUI to integrate it, however, you can check the UIKit implementation sample on the quickstart page. It can be also applied to this example.

Explore a full code sample on GitHub.

View on GitHub

Import#

After adding the IMGLYUI Swift Package to your app. You can get started right away by importing the editor module into your own code.

Initialization#

The editor is initialized with EngineSettings which are used to initialize the underlying Engine. The license key that you received from IMG.LY is the only required parameter. Additionally, you should provide an optional unique ID tied to your application's user. This helps us accurately calculate monthly active users (MAU) and it is especially useful when one person uses the app on multiple devices with a sign-in feature, ensuring they're counted once.

For more details on how to configure the editor, visit the configuration page.

Presentation#

In this integration example the editor is presented as a modal view after tapping a button. Check out the quickstart page for details on the expected environment for the editor and the ModalEditor helper.

Callbacks#

The photo editor should be used with custom callbacks to fit your use case. The onCreate callback is required to create a scene with just a single page with an image fill applied. This page is the photo you are editing. Its size can be changed to define a custom crop format. Per default, OnCreateEditor.loadImage with a white image is used. The default onExport callback exports a PNG compressed image, writes the content into a temporary file, and opens a system dialog for sharing the exported file. In this example, we changed the exported format to JPEG.


import IMGLYEngine
import IMGLYPhotoEditor

import SwiftUI

struct PhotoEditorSolution: View {
  let settings = EngineSettings(license: secrets.licenseKey,
                                userID: "<your unique user id>")

  var editor: some View {
    PhotoEditor(settings)
      .imgly.onCreate { engine in
        // Create scene from image
        try await engine.scene.create(fromImage: Bundle.main.url(forResource: "sample_image", withExtension: "jpg")!)
        // Add asset sources
        try await engine.addDefaultAssetSources(baseURL: Engine.assetBaseURL)
        try await engine.addDemoAssetSources(sceneMode: engine.scene.getMode(),
                                             withUploadAssetSources: true)
        try await engine.asset.addSource(TextAssetSource(engine: engine))

        let page = try engine.scene.getPages().first!
        // Define custom page (photo) size if needed
        try engine.block.setWidth(page, value: 1080)
        try engine.block.setHeight(page, value: 1080)

        // Assign image fill to page
        let image = try engine.block.find(byType: .graphic).first!
        try engine.block.setFill(page, fill: engine.block.getFill(image))
        try engine.block.destroy(image)
      }
      .imgly.onExport { engine, eventHandler in
        // Export photo
        let scene = try engine.scene.get()!
        let mimeType: MIMEType = .jpeg
        let data = try await engine.block.export(scene, mimeType: mimeType)

        // Write and share file
        let url = FileManager.default.temporaryDirectory.appendingPathComponent(
          "Export",
          conformingTo: mimeType.uniformType
        )
        try data.write(to: url, options: [.atomic])
        eventHandler.send(.shareFile(url))
      }
  }

  @State private var isPresented = false

  var body: some View {
    Button("Use the Editor") {
      isPresented = true
    }
    .fullScreenCover(isPresented: $isPresented) {
      ModalEditor {
        editor
      }
    }
  }
}