Skip to content

Create From Image

Starting from an existing image allows you to use the editor for customizing individual assets. This is done by using func create(from imageURL: URL, dpi: Float = 300, pixelScaleFactor: Float = 1) async throws -> DesignBlockID and passing a URL as argument. The dpi argument sets the dots per inch of the scene. The pixelScaleFactor sets the display’s pixel scale factor.

Create a Scene From an Image

In this example, we will show you how to initialize the CreativeEditor SDK with an initial image.

Specify the source to use for the initial image. This can be a relative path or a remote URL.

let scene = try await engine.scene.create(fromImage: URL(string: "https://img.ly/static/ubq_samples/sample_4.jpg")!)

We can retrieve the graphic block id of this initial image using func find(byType type: DesignBlockType) throws -> [DesignBlockID]. Note that that function returns an array. Since there’s only a single graphic block in the scene, the block is at index 0.

// Find the automatically added graphic block in the scene that contains the image fill.
let block = try engine.block.find(byType: .graphic).first!

We can then manipulate and modify this block. Here we modify its opacity with func setOpacity(_ id: DesignBlockID, value: Float) throws. See Modifying Scenes for more details.

// Change its opacity.
try engine.block.setOpacity(block, value: 0.5)

When starting with an initial image, the scene’s page dimensions match the given resource and the scene is configured to be in pixel design units.

To later save your scene, see Saving Scenes.

Full Code

Here’s the full code:

import Foundation
import IMGLYEngine


@MainActor
func createSceneFromImageURL(engine: Engine) async throws {
  let scene = try await engine.scene.create(fromImage: URL(string: "https://img.ly/static/ubq_samples/sample_4.jpg")!)


  // Find the automatically added graphic block in the scene that contains the image fill.
  let block = try engine.block.find(byType: .graphic).first!


  // Change its opacity.
  try engine.block.setOpacity(block, value: 0.5)
}

Create a Scene From a Blob

In this example, we will show you how to initialize the CreativeEditor SDK with an initial image provided from a blob.

First, get hold of a blob by fetching an image from the web. This is just for demonstration purposes and your blob object may come from a different source.

let blob = try await URLSession.shared.data(from: .init(string: "https://img.ly/static/ubq_samples/sample_4.jpg")!).0

Afterward, create a temporary URL and save the Data.

let url = FileManager.default.temporaryDirectory
  .appendingPathComponent(UUID().uuidString)
  .appendingPathExtension("jpg")
try blob.write(to: url, options: .atomic)

Use the created URL as a source for the initial image.

let scene = try await engine.scene.create(fromImage: url)

We can retrieve the graphic block id of this initial image using func find(byType type: DesignBlockType) throws -> [DesignBlockID]. Note that that function returns an array. Since there’s only a single graphic block in the scene, the block is at index 0.

// Find the automatically added graphic block in the scene that contains the image fill.
let block = try engine.block.find(byType: .graphic).first!

We can then manipulate and modify this block. Here we modify its opacity with func setOpacity(_ id: DesignBlockID, value: Float) throws. See Modifying Scenes for more details.

// Change its opacity.
try engine.block.setOpacity(block, value: 0.5)

When starting with an initial image, the scenes page dimensions match the given image, and the scene is configured to be in pixel design units.

To later save your scene, see Saving Scenes.

Full Code

Here’s the full code:

import Foundation
import IMGLYEngine


@MainActor
func createSceneFromImageBlob(engine: Engine) async throws {
  let blob = try await URLSession.shared.data(from: .init(string: "https://img.ly/static/ubq_samples/sample_4.jpg")!).0


  let url = FileManager.default.temporaryDirectory
    .appendingPathComponent(UUID().uuidString)
    .appendingPathExtension("jpg")
  try blob.write(to: url, options: .atomic)


  let scene = try await engine.scene.create(fromImage: url)


  // Find the automatically added graphic block in the scene that contains the image fill.
  let block = try engine.block.find(byType: .graphic).first!


  // Change its opacity.
  try engine.block.setOpacity(block, value: 0.5)
}