The CreativeEngine allows you to save scenes in a binary format to share them between editors or store them for later editing.
Saving a scene can be done as a either scene file or as an archive file. A scene file does not include any fonts or images. Only the source URIs of assets, the general layout, and element properties are stored. When loading scenes in a new environment, ensure previously used asset URIs are available. Conversely, an archive file contains within it the scene’s assets and references them as relative URIs.
Save Scenes to an Archive#
In this example, we will show you how to save scenes as an archive with the CreativeEditor SDK.
As an archive, the resulting Blob includes all pages and any hidden elements and all the asset data.
To get hold of such a Blob, you need to use engine.scene.saveToArchive().
This is an asynchronous method returning a Promise.
After waiting for the Promise to resolve, we receive a Blob holding the entire scene currently loaded in the editor including its assets’ data.
engine.scene .saveToString(['http', 'https'], async (uri, hash) => { var persistedUri = alreadyPersistedUris[hash]; if (!persistedUri) { persistedUri = 'http://example.com/' + uri.split('://')[1]; alreadyPersistedUris[hash] = persistedUri; editor.getResourceData(uri, 10000000, async (blob) => { try { await fetch(persistedUri, { mode: 'no-cors', method: 'POST', body: blob }); } catch (error) { console.error(`Failed to persist ${uri}:`, error); persistedUri = uri; } }); } return persistedUri; }) .then((sceneAsString) => { console.log('Save succeeded'); console.log(sceneAsString); }) .catch((error) => { console.error('Save failed', error); });That Blob can then be treated as a form file parameter and sent to a remote location.
const formData = new FormData();formData.append('file', blob);fetch('/upload', { method: 'POST', body: formData});Full Code#
Here’s the full code:
import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.58.0/index.js';
const config = { license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm', userId: 'guides-user', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.58.0/assets',};
CreativeEngine.init(config).then(async engine => { engine.scene .saveToArchive() .then(blob => { const formData = new FormData(); formData.append('file', blob); fetch('/upload', { method: 'POST', body: formData, }); }) .catch(error => { console.error('Save failed', error); });});Save Scenes to a Blob#
In this example, we will show you how to save scenes as a Blob with the CreativeEditor SDK.
This is done by converting the contents of a scene to a string, which can then be stored or transferred.
For sending these to a remote location, we wrap them in a Blob and treat it as a file object.
To get hold of the scene contents as string, you need to use engine.scene.saveToString().
This is an asynchronous method returning a Promise.
After waiting for the Promise to resolve, we receive a plain string holding the entire scene currently loaded in the editor.
This includes all pages and any hidden elements but none of the actual asset data.
engine.scene .saveToString(['http', 'https'], async (uri, hash) => { var persistedUri = alreadyPersistedUris[hash]; if (!persistedUri) { persistedUri = 'http://example.com/' + uri.split('://')[1]; alreadyPersistedUris[hash] = persistedUri; editor.getResourceData(uri, 10000000, async (blob) => { try { await fetch(persistedUri, { mode: 'no-cors', method: 'POST', body: blob }); } catch (error) { console.error(`Failed to persist ${uri}:`, error); persistedUri = uri; } }); } return persistedUri; }) .then((sceneAsString) => { console.log('Save succeeded'); console.log(sceneAsString); }) .catch((error) => { console.error('Save failed', error); });The returned string consists solely of ASCII characters and can safely be used further or written to a database.
In this case, we need a Blob object, so we proceed to wrap the received string into a Blob, a file-like object of immutable, raw data.
const blob = new Blob([savedSceneString], { type: 'text/plain'});That object can then be treated as a form file parameter and sent to a remote location.
const formData = new FormData();formData.append('file', blob);fetch('/upload', { method: 'POST', body: formData});Full Code#
Here’s the full code:
import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.58.0/index.js';
const config = { license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm', userId: 'guides-user', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.58.0/assets',};
CreativeEngine.init(config).then(async engine => { engine.scene .saveToString() .then(savedSceneString => { const blob = new Blob([savedSceneString], { type: 'text/plain', });
const formData = new FormData(); formData.append('file', blob); fetch('/upload', { method: 'POST', body: formData, }); }) .catch(error => { console.error('Save failed', error); });});Save Scenes to a String#
In this example, we will show you how to save scenes as a string with the CreativeEditor SDK.
This is done by converting the contents of a scene to a single string, which can then be stored or transferred.
To get hold of such a string, you need to use engine.scene.saveToString().
This is an asynchronous method returning a Promise.
After waiting for the Promise to resolve, we receive a plain string holding the entire scene currently loaded in the editor.
This includes all pages and any hidden elements, but none of the actual asset data.
engine.scene .saveToString(['http', 'https'], async (uri, hash) => { var persistedUri = alreadyPersistedUris[hash]; if (!persistedUri) { persistedUri = 'http://example.com/' + uri.split('://')[1]; alreadyPersistedUris[hash] = persistedUri; editor.getResourceData(uri, 10000000, async (blob) => { try { await fetch(persistedUri, { mode: 'no-cors', method: 'POST', body: blob }); } catch (error) { console.error(`Failed to persist ${uri}:`, error); persistedUri = uri; } }); } return persistedUri; }) .then((sceneAsString) => { console.log('Save succeeded'); console.log(sceneAsString); }) .catch((error) => { console.error('Save failed', error); });The returned string consists solely of ASCII characters and can safely be used further or written to a database.
console.log(sceneAsString);Full Code#
Here’s the full code:
import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.58.0/index.js';
const config = { license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm', userId: 'guides-user', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.58.0/assets',};
CreativeEngine.init(config).then(async engine => { engine.scene .saveToString() .then(sceneAsString => { console.log('Save succeeded'); console.log(sceneAsString); }) .catch(error => { console.error('Save failed', error); });});Save Previously Archived Scenes to a String and Persist Resources#
In this example, we will show you how to save scenes that were loaded from an archive to a string with the CreativeEditor SDK.
Some scenes contain resources that are only transient and may be lost after the scene is destroyed.
An example is a scene that was previously saved as an archive.
When loaded, the data of the archived scene’s resources is held in in-memory buffers.
Saving again that scene to string would result in a scene with URLs whose schemes are buffer which is unusable in any other instance of the editor.
It is best that all resources are put online so they are always available.
To that end, you can use the saveToString()’s allowedResourceSchemes and onDisallowedResourceScheme parameters to be notified of resources whose URL should not end in the final string.
Set the allowedResourceSchemes argument to an array of schemes whose values can be kept as-is and set the onDisallowedResourceScheme to a function that will save the resource’s data to a permanent location and call an embedded callback with the new URL to refer to that resource.
Any resource whose URL scheme is not found in the allowedResourceSchemes array will trigger a call of the passed onDisallowedResourceScheme argument with the resource’s URL, a hash of its data and the embedded callback to call with the new URL.
engine.scene .saveToString(['http', 'https'], async (uri, hash) => { var persistedUri = alreadyPersistedUris[hash]; if (!persistedUri) { persistedUri = 'http://example.com/' + uri.split('://')[1]; alreadyPersistedUris[hash] = persistedUri; editor.getResourceData(uri, 10000000, async (blob) => { try { await fetch(persistedUri, { mode: 'no-cors', method: 'POST', body: blob }); } catch (error) { console.error(`Failed to persist ${uri}:`, error); persistedUri = uri; } }); } return persistedUri; }) .then((sceneAsString) => { console.log('Save succeeded'); console.log(sceneAsString); }) .catch((error) => { console.error('Save failed', error); });The returned string consists solely of ASCII characters and can safely be used further or written to a database.
console.log(sceneAsString);Full Code#
Here’s the full code:
import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.58.0/index.js';
const config = { license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm', userId: 'guides-user', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.58.0/assets'};
CreativeEngine.init(config).then(async (engine) => { var alreadyPersistedUris = {}; engine.scene .saveToString(['http', 'https'], async (uri, hash) => { var persistedUri = alreadyPersistedUris[hash]; if (!persistedUri) { persistedUri = 'http://example.com/' + uri.split('://')[1]; alreadyPersistedUris[hash] = persistedUri; editor.getResourceData(uri, 10000000, async (blob) => { try { await fetch(persistedUri, { mode: 'no-cors', method: 'POST', body: blob }); } catch (error) { console.error(`Failed to persist ${uri}:`, error); persistedUri = uri; } }); } return persistedUri; }) .then((sceneAsString) => { console.log('Save succeeded'); console.log(sceneAsString); }) .catch((error) => { console.error('Save failed', error); });});