Skip to main content
CESDK/Web/Guides/APIs
Language:

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.
File:
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();
});