Save a Scene

In this example, we will show you how to use the CreativeEditor SDK's Creative Engine to save scenes through the scene API and export them to PNG.

At any time, the engine contains only a single scene. Loading or creating a scene will replace the current one.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

Setup#

This example uses the headless Creative Engine. See the Setup article for a detailed guide. To get started right away, you can also access the scene API within a running CE.SDK instance via cesdk.engine.scene. Check out the APIs Overview to see that illustrated in more detail.

Preparing a scene#

Before a scene can be saved, a scene has to be loaded or created, e.g., using load from URL.

loadFromURL(url: string): Promise<number>
loads a scene file directly from a URL. It returns the block id of the loaded scene. The URL has to be reachable and loadable from the context of your app. If you require more complicated requests than a simple GET, load the scene in your application code and then use the loadFromString() method.

Saving the scene#

saveToString(): Promise<string>
serializes the scene into a string.

saveToArchive(): Promise<Blob>
Saves the current scene and all of its referenced assets into an archive. The archive contains all assets, that were accessible when this function was called. Blocks in the archived scene reference assets relative to the location of the scene file. These references are resolved relative to the archive's locations when loading such a scene via loadSceneFromURL.

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.7.0/index.js';

const config = {
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.7.0/assets'
};

// Fetch scene file and store it as a string.
const SCENE_CONTENT = await fetch(
  'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets/templates/cesdk_postcard_1.scene'
).then((response) => {
  return response.text();
});

CreativeEngine.init(config).then(async (engine) => {
  // Creating scenes
  // highlight-create
  let scene = engine.scene.create();
  // highlight-create
  // highlight-createFromImage
  scene = await engine.scene.createFromImage(
    'https://img.ly/static/ubq_samples/sample_4.jpg'
  );
  // highlight-createFromImage
  // Export the scene to an image
  let imageData = await engine.block.export(scene);

  // Loading scenes
  // highlight-loadFromString
  scene = engine.scene.loadFromString(SCENE_CONTENT);
  scene = await engine.scene.loadFromURL(
    'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets/templates/cesdk_postcard_1.scene'
  );
  imageData = await engine.block.export(scene);

  // Save the scene
  scene = await engine.scene.saveToString();

  const archive = await engine.scene.saveToArchive();

  // Apply a template scene
  // highlight-applyTemplateFromString
  engine.scene.applyTemplateFromString(SCENE_CONTENT);
  // highlight-applyTemplateFromURL
  engine.scene.applyTemplateFromURL(
    'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets/templates/cesdk_postcard_1.scene'
  );

  // Get the scene id
  // highlight-get
  scene = engine.scene.get();
  // highlight-get

  // highlight-zoom
  engine.scene.setZoomLevel(1.0);
  engine.scene.setZoomLevel(0.5 * engine.scene.getZoomLevel());
  await engine.scene.zoomToBlock(scene, 20.0, 20.0, 20.0, 20.0);
  // highlight-zoom

  engine.dispose();
});