marker.js 2 Demos: Save and restore state

Save and restore state

You can save marker.js state in your database, file, or wherever you feel appropriate. Then you can restore this state and continue editing your annotations.

Click on the image below, annotate, save. Then click again to continue annotating or edit the current markup. Repeat as many times as you like.

Click on the image to launch the demo, save, click again to continue annotating.

Open in CodeSandbox

Code

In addition to rendered annotated image render event passes current MarkerArea state that we can preserve and recall later:

markerArea.addEventListener("render", (event) => { 
  target.src = event.dataUrl;
  // save the state of MarkerArea
  maState = event.state;
});
markerArea.show();
// if previous state is present - restore it
if (maState) {
  markerArea.restoreState(maState);
}

For this demo to work an unlimited number of times we layer two copies of the original image so the source image is never changed and can be reused multiple times.

Here's a complete HTML file to recreate this demo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>All defaults demo</title>
  <script src="https://unpkg.com/markerjs2/markerjs2.js"></script>
  <script>
    let sourceImage, targetRoot, maState;

    // save references to the original image and its parent div (positioning root)
    function setSourceImage(source) {
      sourceImage = source;
      targetRoot = source.parentElement;
    }

    function showMarkerArea(target) {
      const markerArea = new markerjs2.MarkerArea(sourceImage);
      // since the container div is set to position: relative it is now our positioning root
      // end we have to let marker.js know that
      markerArea.targetRoot = targetRoot;
      markerArea.EventListener("render",, (event) => { 
        target.src = event.dataUrl;
        // save the state of MarkerArea
        maState = event.state;
      });
      markerArea.show();
      // if previous state is present - restore it
      if (maState) {
        markerArea.restoreState(maState);
      }
    }
  </script>
</head>
<body>

  <div style="position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 50px;">
    <!-- we are putting a copy of the original image under the result image so it's always annotation-free -->
    <img src="img/sample-1.jpg" style="max-width: 600px;" onload="setSourceImage(this);" />
    <img src="img/sample-1.jpg" style="max-width: 600px; position: absolute;" onclick="showMarkerArea(this);" />
  </div>
</body>
</html>

Check out a simple self-contained page for this demo.

« Previous demoNext demo »