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.
The image does not need to be downloaded during the creation of the
serialization so we can set enableDownload to false.
It is a good idea to change the label of the Export Image button
to represent the new functionality.
Add an event listener for the export event to listen for the click on the
Create Serialization button.
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.
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.
You can now use the initEditor function to initialize an editor view
which can be used to generate serialization.
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.
The deserialize function
needs to be called after the editor is ready and fully initialized.