How to Convert PDF to JPG or PNG: In-Browser Vector Rasterization, Color Spaces & Resolution Scaling

// 1. Import PDF.js worker-backed engine
import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs';

/**
 * Rasterizes a single PDF page into an image Blob completely client-side.
 * @param {ArrayBuffer} arrayBuffer - Raw PDF binary data
 * @param {number} pageNumber - 1-based page index
 * @param {number} targetDPI - Target print density (e.g. 300)
 * @param {'image/png' | 'image/jpeg'} format - Target image mime type
 * @returns {Promise<Blob>}
 */
export async function rasterizePdfPage(arrayBuffer, pageNumber = 1, targetDPI = 300, format = 'image/png') {
  // Ingest document into sandbox isolate
  const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer });
  const pdfDocument = await loadingTask.promise;
  const page = await pdfDocument.getPage(pageNumber);

  // Compute scale ratio: 72 points standard PDF unit
  const scale = targetDPI / 72.0;
  const viewport = page.getViewport({ scale });

  // Allocate OffscreenCanvas to prevent UI main thread stalls
  const canvas = new OffscreenCanvas(
    Math.floor(viewport.width),
    Math.floor(viewport.height)
  );
  const context = canvas.getContext('2d', { alpha: format === 'image/png' });

  // Execute hardware accelerated vector rendering
  const renderContext = {
    canvasContext: context,
    viewport: viewport,
    intent: 'print'
  };

  await page.render(renderContext).promise;

  // Serialize canvas to compressed binary blob
  const blob = await canvas.convertToBlob({
    type: format,
    quality: format === 'image/jpeg' ? 0.92 : 1.0
  });

  // Evacuate heap allocations immediately to prevent tab OOM
  page.cleanup();
  pdfDocument.destroy();

  return blob;
}