apps/web/test9.html

<!doctype html>
<html lang="en">
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="
        default-src 'self' 'unsafe-inline' blob: resource: https://unpkg.com/@pdf-lib/fontkit/dist/fontkit.umd.js;
        object-src 'self' blob:;
        frame-src 'self' blob:;
      "
    />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="/apps/web/index.css" />
    <title>Test 9</title>
    <script type="text/javascript" src="/dist/pdf-lib.js"></script>
    <script type="text/javascript" src="/apps/web/utils.js"></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/@pdf-lib/fontkit/dist/fontkit.umd.js"
    ></script>
  </head>

  <body>
    <div id="button-container">
      <button onclick="window.location.href = '/apps/web/test8.html'">
        Prev
      </button>
      <button onclick="test()">Run Test</button>
      <button onclick="window.location.href = '/apps/web/test10.html'">
        Next
      </button>
    </div>
    <div id="animation-target"></div>
    <iframe id="iframe"></iframe>
  </body>

  <script type="text/javascript">
    startFpsTracker('animation-target');

    const fetchAsset = (asset) =>
      fetch(`/assets/${asset}`)
        .then((res) => res.arrayBuffer())
        .then((res) => new Uint8Array(res));

    const renderInIframe = (pdfBytes) => {
      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
      const blobUrl = URL.createObjectURL(blob);
      document.getElementById('iframe').src = blobUrl;
    };

    async function test() {
      const { PDFDocument, rgb } = PDFLib;

      const [inputPdfBytes, ubuntuBytes, smallMarioBytes] = await Promise.all([
        fetchAsset('pdfs/with_comments.pdf'),
        fetchAsset('fonts/ubuntu/Ubuntu-R.ttf'),
        fetchAsset('images/small_mario.png'),
      ]);

      const pdfDoc = await PDFDocument.load(inputPdfBytes);

      pdfDoc.registerFontkit(fontkit);

      const ubuntuFont = await pdfDoc.embedFont(ubuntuBytes, { subset: true });
      const smallMarioImage = await pdfDoc.embedPng(smallMarioBytes);
      const smallMarioDims = smallMarioImage.scale(0.15);

      const pages = pdfDoc.getPages();

      const lines = [
        'This is an image of Mario running.',
        'This image and text was drawn on',
        'top of an existing PDF using pdf-lib!',
      ];
      const fontSize = 24;
      const solarizedWhite = rgb(253 / 255, 246 / 255, 227 / 255);
      const solarizedGray = rgb(101 / 255, 123 / 255, 131 / 255);

      const textWidth = ubuntuFont.widthOfTextAtSize(lines[2], fontSize);

      pages.forEach((page) => {
        const { width, height } = page.getSize();
        const centerX = width / 2;
        const centerY = height / 2 - 250;
        page.drawImage(smallMarioImage, {
          ...smallMarioDims,
          x: centerX - smallMarioDims.width / 2,
          y: centerY + 15,
        });
        const boxHeight = (fontSize + 5) * lines.length;
        page.drawRectangle({
          x: centerX - textWidth / 2 - 5,
          y: centerY - 15 - boxHeight + fontSize + 3,
          width: textWidth + 10,
          height: boxHeight,
          color: solarizedWhite,
          borderColor: solarizedGray,
          borderWidth: 3,
        });
        page.setFont(ubuntuFont);
        page.setFontColor(solarizedGray);
        page.drawText(lines.join('\n'), {
          x: centerX - textWidth / 2,
          y: centerY - 15,
        });
      });

      const pdfBytes = await pdfDoc.save();

      renderInIframe(pdfBytes);
    }
  </script>
</html>