PDF to images

import * as pdfjsLib from "pdfjs-dist";
import workerUrl from "pdfjs-dist/build/pdf.worker.min.mjs?url";

pdfjsLib.GlobalWorkerOptions.workerSrc = workerUrl;

// pageNumber is 1-based; scale controls the resolution (2 is roughly high quality).
export async function renderPdfPageToImage(
  file: File,
  pageNumber: number,
  scale = 2,
  format: "png" | "jpeg" = "png",
  quality = 0.92,
): Promise<string> {
  const data = new Uint8Array(await file.arrayBuffer());
  const pdf = await pdfjsLib.getDocument({ data }).promise;
  const page = await pdf.getPage(pageNumber);

  const viewport = page.getViewport({ scale });
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");
  if (!context) {
    throw new Error("Couldn't get the canvas 2D context.");
  }

  canvas.width = Math.ceil(viewport.width);
  canvas.height = Math.ceil(viewport.height);

  await page.render({ canvas, canvasContext: context, viewport }).promise;
  await pdf.destroy();

  return canvas.toDataURL(format === "jpeg" ? "image/jpeg" : "image/png", format === "jpeg" ? quality : undefined);
}