pages/web-worker.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PAG</title>
    <link rel="icon" href="https://pag.io/img/favicon.png" />
    <style>
      body {
        padding: 12px;
      }
      .header {
        height: 64px;
        border-bottom: 1px solid rgb(193, 193, 193);
        margin-bottom: 24px;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <img src="../assets/logo.png" alt="logo" width="133" height="48" />
    </div>
    <div>
      <canvas class="canvas" id="pag"></canvas>
    </div>
    <script type="module">
      import { createPAGWorker, WorkerPAGFile, WorkerPAGImage, WorkerPAGView } from '../lib/libpag.worker.esm.js';
      window.onload = async () => {
        const worker = await createPAGWorker({
          locateFile: (file) => {
            if (file === 'libpag.wasm') {
              return '../lib/libpag.wasm';
            }
            if (file === 'libpag.js') {
              return '../lib/libpag.min.js';
            }
            return file;
          },
        });
        const buffer = await fetch('../assets/test.pag').then((res) => res.arrayBuffer());
        const canvas = document.createElement('canvas');
        canvas.width = 300;
        canvas.height = 300;
        document.body.appendChild(canvas);

        const pagFile = await WorkerPAGFile.load(worker, buffer);
        // Modify text
        const textData = await pagFile.getTextData(0);
        textData.text = 'Hello World!';
        await pagFile.replaceText(0, textData);
        // Ensure image is loaded
        const image = await new Promise((resolve) => {
          const img = new Image();
          img.onload = () => resolve(img);
          img.src = '../assets/cat.png';
        });
        // Create PAGImage
        const pagImage = await WorkerPAGImage.fromSource(worker, image);
        pagFile.replaceImage(0, pagImage);
        pagImage.destroy();

        const pagView = await WorkerPAGView.init(pagFile, canvas);
        if (pagView) {
          pagView.play();
        }
      };
    </script>
  </body>
</html>