Saving and restoring state
You can enable your users to continue their previous annotation session. To make this possible, in addition to returning rendered markup, marker.js 2 passes you its state at the time of rendering. You can recall this state in the next session to continue annotating.
Saving state
As part of the render event marker.js passes a second parameter containing its state object at the time of rendering.
At this moment, you can save this state in your database, file, browser's local storage, or wherever you see appropriate.
This state is a serializable JavaScript object that you can "render" to string with JSON.stringify() and restore back to its object state with JSON.parse() when needed.
In this snippet we just store the state in a variable:
markerArea.addEventListener('render', (event) => {
target.src = event.dataUrl;
// save the state of MarkerArea
maState = event.state;
});Restoring state
Next time, when you want to continue editing the annotations, just pass this state object to the MarkerArea.restoreState() method.
IMPORTANT
Make sure you call the restoreState() method after you call the show() method. MarkerArea has to be properly initialized and open to be able to recreate all the previously created markers.
markerArea.show();
// if previous state is present - restore it
if (maState) {
markerArea.restoreState(maState);
}Useful tips
In order to support multiple editing sessions, you need to have references to both the original (unmarked) and result (annotated) images.
One way to achieve this is to overlay the resulting image on top of the original and use the "bottom" image as the one you pass to the MarkerArea constructor while rendering the result to the "top" image.
To see this approach in action, make sure to check the save and restore state demo.