Creating 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.

Explore a full code sample on Stackblitz or view the code on Github.

Starting from an existing image allows you to use the editor for customizing individual assets. This is done by using engine.scene.createFromImage(url: string, dpi = 300, pixelScaleFactor = 1): Promise<number> 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.

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.

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

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

We can retrieve the graphic block id of this initial image using cesdk.engine.block.findByType(type: ObjectType): number[]. Note that that function returns an array. Since there's only a single graphic block in the scene, the block is at index 0.

We can then manipulate and modify this block. Here we modify its opacity with cesdk.engine.block.setOpacity(id: number, opacity: number): void. See Modifying Scenes for more details.

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.


import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.41.1/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.41.1/assets'
};

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

  // highlight-find-findByType
  // Find the automatically added graphic block in the scene that contains the image fill.
  const block = engine.block.findByType('graphic')[0];
  // highlight-find-findByType

  // Change its opacity.
  engine.block.setOpacity(block, 0.5);

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