Skip to main content
PESDK/Web/Guides
Language:

Creating a Serialization

This guide will show you how to create an editor view that can be used to create a serialization and how to apply this serialization to every new image.

Check out the CreativeEditor SDK if you require a design editor with a template-based workflow.

1. Create the serialization#

We will use the export event as a trigger to serialize the current state of the editor. This allows us to manually create a serialization file on a button click.

serialize.js
export: {
image: {
enableDownload: false,
},
},
custom: {
languages: {
en: {
mainCanvasActions: {
buttonExport: 'Create Serialization',
},
},
},
},
});
editor.on('export', () => {
editor.serialize({ image: false }).then(data => {
const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(
JSON.stringify(data, true, 2),
)}`;
const link = document.createElement('a');
link.setAttribute('href', dataStr);
link.setAttribute('download', 'serialization.json');
link.click();
});
});

The image does not need to be downloaded during the creation of the serialization so we can set enableDownload to false.

serialize.js
export: {
image: {
enableDownload: false,
},
},

It is a good idea to change the label of the Export Image button to represent the new functionality.

serialize.js
custom: {
languages: {
en: {
mainCanvasActions: {
buttonExport: 'Create Serialization',
},
},
},
},

Add an event listener for the export event to listen for the click on the Create Serialization button.

serialize.js
editor.on('export', () => {
editor.serialize({ image: false }).then(data => {
const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(
JSON.stringify(data, true, 2),
)}`;
const link = document.createElement('a');
link.setAttribute('href', dataStr);
link.setAttribute('download', 'serialization.json');
link.click();
});
});

The serialize function will create a serialization object which should be stringified before you handle it further.

The image argument in serialize needs to be set to false since you don't want to include the original image in the serialization.

serialize.js
editor.serialize({ image: false }).then(data => {

This example code will download the serialization data as a JSON file and save it locally. You can also handle this differently and save the data on a remote source.

serialize.js
const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(
JSON.stringify(data, true, 2),
)}`;
const link = document.createElement('a');
link.setAttribute('href', dataStr);
link.setAttribute('download', 'serialization.json');
link.click();

You can now use the initEditor function to initialize an editor view which can be used to generate serialization.

serialize.js
initEditor();

2. Use the serialization#

You can call the deserialize function manually to apply a serialization to a loaded image or you listen for the editorReady event to apply it automatically.

This example code will use the Fetch API to load a local serialization file. You can also load this data from a remote source.

index.js
const data = await fetch('./serialization.json');
const template = await data.json();

The deserialize function needs to be called after the editor is ready and fully initialized.

index.js
editor.on('editorReady', () => {
editor.deserialize(template);
});
File:
const initEditor = async () => {
const editor = await PhotoEditorSDK.PhotoEditorSDKUI.init({
container: '#editor',
license: '',
assetBaseUrl: 'https://cdn.jsdelivr.net/npm/photoeditorsdk@latest/assets',
image:
'https://images.unsplash.com/photo-1599713061074-9efa95376d3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80',
export: {
image: {
enableDownload: false,
},
},
custom: {
languages: {
en: {
mainCanvasActions: {
buttonExport: 'Create Serialization',
},
},
},
},
});
editor.on('export', () => {
editor.serialize({ image: false }).then(data => {
const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(
JSON.stringify(data, true, 2),
)}`;
const link = document.createElement('a');
link.setAttribute('href', dataStr);
link.setAttribute('download', 'serialization.json');
link.click();
});
});
};
initEditor();