Export ink annotation as image

// "annotation" is a reference to our ink annotation

const svgSelector = `.PSPDFKit-Ink-Annotation[data-annotation-id="${
  annotation.id
}"] svg`;

// Wait until SVG is rendered
const observer = new MutationObserver(async () => {
  const svgEl = instance.contentDocument.querySelector(svgSelector);
  if (svgEl) {
    observer.disconnect();

    // we need to set the first "g" element to transparent
    svgEl.querySelector("g").style.fill = "transparent";

    // serialize to XML
    const svg = new XMLSerializer().serializeToString(svgEl);

    // download the SVG
    const link = document.createElement("a");
    link.href = `data:svg+xml; charset=utf-8, ${svg}`;
    link.download = `${annotation.id}.svg`;
    link.click();

    // Instead of downloading the svg, we can instead
    // render it to a canvas and export the blob
    // as a png.
  }
});
observer.observe(page, { subtree: true, childList: true });

const img = new Image();
img.src = `data:image/svg+xml; charset=utf-8, ${svg}`;
img.onload = () => {
  const canvas = document.createElement("canvas");
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  canvas.toBlob(
    async blob => {
      // we can process the blob as we'd like here
    },
    { type: "image/png" }
  );
};