Search
Loading...
Skip to content

Save Images and Videos Using Vue.js

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()
  .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.57.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL:
    'https://cdn.img.ly/packages/imgly/cesdk-engine/1.57.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()
  .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.57.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL:
    'https://cdn.img.ly/packages/imgly/cesdk-engine/1.57.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()
  .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.57.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL:
    'https://cdn.img.ly/packages/imgly/cesdk-engine/1.57.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);
    });
});