build_web/examples/example_text_overlay.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example: Text overlay</title>
  <style>
    .stretch {
      width: 100%;
      height: 100%;
      position: absolute;
      left:0; right: 0; top:0; bottom: 0;
    }
  </style>
</head>
<body>
  Loading ... Zoom in to see the text overlay
  <canvas id="image-layer" class="stretch"></canvas>
  <canvas id="text-layer" class="stretch"></canvas>
  <div id="mouse-layer" class="stretch"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development.js"></script>
  <script src="../jeri.js"></script>
  <script>
    const ImageLayer = Jeri.ImageLayer;
    const MouseLayer = Jeri.MouseLayer;
    const TextLayer = Jeri.TextLayer;

    const cache = new Jeri.ImageCache();
    const imgUrl = "images/test_image.exr";

    cache.get(imgUrl)
      .then((image) => {
        const imageLayer = new ImageLayer(document.getElementById('image-layer'), image);
        const textLayer = new TextLayer(document.getElementById('text-layer'), image);
        const mouseLayer = new MouseLayer(document.getElementById('mouse-layer'), image);
        mouseLayer.setEnableMouseEvents(true);
        mouseLayer.onTransformationChange(function (transformation) {
          imageLayer.setTransformation(transformation);
          textLayer.setTransformation(transformation);
        });
      })
      .catch((error) => console.error(error));
  </script>
</body>
</html>