Function addImageFromFile

examples/pdf-server/src/mcp-app.ts:5684–5757

* Create an image annotation from a File/Blob at the given screen position. * If no position is given, places the image at the center of the current page.

(
  file: File | Blob,
  screenX?: number,
  screenY?: number,
)

 * If no position is given, places the image at the center of the current page.
 */
function addImageFromFile(
  file: File | Blob,
  screenX?: number,
  screenY?: number,
): void {
  const reader = new FileReader();
  reader.onload = () => {
    const dataUrl = reader.result as string;
    const base64 = dataUrl.split(",")[1];
    const mimeType =
      file.type || (base64.startsWith("/9j/") ? "image/jpeg" : "image/png");

    const img = new Image();
    img.onload = () => {
      const maxWidth = 200; // PDF points
      const aspectRatio = img.naturalHeight / img.naturalWidth;
      const width = Math.min(img.naturalWidth, maxWidth);
      const height = width * aspectRatio;

      // Convert screen position to PDF internal coords, or default to page center
      let pdfX: number;
      let pdfInternalY: number;
      if (screenX != null && screenY != null) {
        pdfX = screenX / scale;
        pdfInternalY = (containerHtmlEl.clientHeight - screenY) / scale;
      } else {
        // Center on the visible page area
        const pageW = containerHtmlEl.clientWidth / scale;
        const pageH = containerHtmlEl.clientHeight / scale;
        pdfX = pageW / 2 - width / 2;
        pdfInternalY = pageH / 2 + height / 2;
      }

      const id = `img_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
      const def: ImageAnnotation = {
        type: "image",
        id,
        page: currentPage,
        x: pdfX,
        y: pdfInternalY,
        width,
        height,
        imageData: base64,
        mimeType,
      };

      // Downscale if base64 data is too large (> ~300KB)
      if (base64.length > 400_000) {
        const canvas = document.createElement("canvas");
        const maxDim = 800;
        let w = img.naturalWidth;
        let h = img.naturalHeight;
        if (w > maxDim || h > maxDim) {
          const ratio = Math.min(maxDim / w, maxDim / h);
          w = Math.round(w * ratio);
          h = Math.round(h * ratio);
        }
        canvas.width = w;