Search
Loading...
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 suspend fun createFromImage(imageUri: URI, dpi: Float = 300F, pixelScaleFactor: Float = 1F): DesignBlock and passing a URI 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 a Remote URL#

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.

await engine.scene.createFromImage(

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 CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.60.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.60.0/assets'
};


CreativeEngine.init(config).then(async (engine) => {
  await engine.scene.createFromImage(
    'https://img.ly/static/ubq_samples/sample_4.jpg'
  );


  // Attach engine canvas to DOM
  document.getElementById('cesdk_container').append(engine.element);
});

Create a Scene From an HTMLImageElement#

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

To use the image shown by an image element as the initial image, use the image element’s src attribute as the imageURL.

const element = document.getElementById('image-element');
const imageURL = element.src;

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

let scene = await engine.scene.createFromImage(objectURL);

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 CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.60.0/index.js';


const element = document.getElementById('image-element');
const imageURL = element.src;


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.60.0/assets'
};


CreativeEngine.init(config).then(async (engine) => {
  let scene = await engine.scene.createFromImage(imageURL);


  // Attach engine canvas to DOM
  document.getElementById('cesdk_container').append(engine.element);
});

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.

const blob = await fetch('https://img.ly/static/ubq_samples/sample_4.jpg').then(
  (response) => response.blob()
);

Afterward, create a URL pointing to the blob via URL.createObjectURL.

const objectURL = URL.createObjectURL(blob);

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

let scene = await engine.scene.createFromImage(objectURL);

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 CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.60.0/index.js';


const blob = await fetch('https://img.ly/static/ubq_samples/sample_4.jpg').then(
  (response) => response.blob()
);
const objectURL = URL.createObjectURL(blob);


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.60.0/assets'
};


CreativeEngine.init(config).then(async (engine) => {
  let scene = await engine.scene.createFromImage(objectURL);


  // Attach engine canvas to DOM
  document.getElementById('cesdk_container').append(engine.element);
});