[Bug]: This PDF yields a blank image in Node and renders successfully in the Web

[xonaman]

Attach (recommended) or Link to PDF file

f29b97d7-f06d-4a74-918a-1eff107331dc.pdf

Web browser and its version

[works fine on browser]

Operating system and its version

AWS Lambda Node 22.x

PDF.js version

^5.4.149 (Node) & ^5.4.54 (Web)

Is the bug present in the latest PDF.js version?

Yes

Is a browser extension

No

Steps to reproduce the problem

Node Implementation:

import { createRequire } from 'node:module';
import path from 'node:path';

import { PageSizes, PDFDocument } from 'pdf-lib';
import * as pdfjs from 'pdfjs-dist/legacy/build/pdf.mjs';

import img from './img.js'; // used for compression

// create CommonJS require function for ES modules
const require = createRequire(import.meta.url);
// resolve base path for PDF.js assets (cmaps, fonts, worker, etc.)
const pdfjsBaseUrl = path.dirname(require.resolve('pdfjs-dist/package.json'));

// configure PDF.js worker for Node.js environment
pdfjs.GlobalWorkerOptions.workerSrc = `${pdfjsBaseUrl}/legacy/build/pdf.worker.min.mjs`;

/**
 * Extracts PDF pages as high-quality JPEG images using optimal rendering settings.
 * Configures PDF.js with full feature support for accurate text and graphics rendering.
 *
 * @param {Buffer} pdfBuffer
 * @param {ExtractOptions} [options]
 * @returns {Promise<Buffer[]>}
 */
async function extractImages(pdfBuffer, options) {
  // load PDF document with full rendering capabilities
  const document = await pdfjs.getDocument({
    data: new Uint8Array(pdfBuffer),
    // enable character encoding maps for international text
    cMapUrl: `${pdfjsBaseUrl}/cmaps/`,
    cMapPacked: true,
    // provide fallback fonts for missing typefaces
    standardFontDataUrl: `${pdfjsBaseUrl}/standard_fonts/`,
    // enable WebAssembly for better performance
    useWasm: true,
    wasmUrl: `${pdfjsBaseUrl}/wasm/`,
    // disable image decoder to avoid compatibility issues
    isImageDecoderSupported: false,
    // enable hardware acceleration if available
    enableHWA: true,
  }).promise;

  // determine which pages to render (default: all pages)
  const pages = options?.pages ?? Array.from({ length: document.numPages }).fill(0).map((_, i) => i + 1);

  // collect promises for asynchronous image processing
  const images = [];

  for (const index of pages) {
    console.log('Rendering page', index, 'of', pages.at(-1), '...');

    // get specific page for rendering
    const page = await document.getPage(index);

    // calculate optimal scaling to fit within maximum dimensions
    const maxDimension = options?.maxSize ?? 2048;
    const v1x = page.getViewport({ scale: 1 });
    const scale = (options?.fit === 'outside' ? Math.max : Math.min)(maxDimension / v1x.width, maxDimension / v1x.height);
    const viewport = page.getViewport({ scale });

    // prepare canvas dimensions for optimal rendering
    const cssW = Math.ceil(viewport.width);
    const cssH = Math.ceil(viewport.height);

    // create canvas using PDF.js canvas factory (Node.js compatible)
    const { canvas, context } = document.canvasFactory.create(viewport.width, viewport.height);
    canvas.width = cssW;
    canvas.height = cssH;

    // render page with optimal content configuration
    const intent = 'display';
    await page.render({
      canvas: null, // let PDF.js manage canvas properly
      canvasContext: context,
      viewport: viewport,
      intent: intent, // optimize for display rather than print
      // include layers and optional content for complete rendering
      optionalContentConfigPromise: document.getOptionalContentConfig({ intent }),
    }).promise;

    // cleanup page resources
    page.cleanup();

    // convert canvas to compressed JPEG with quality between 0-1
    const image = canvas.toBuffer('image/jpeg', {
      quality: (options?.quality ?? 80) / 100,
    });
    // free canvas memory
    canvas.width = canvas.height = 0;

    // queue image for additional compression via Sharp
    images.push(img.compress(image, {
      quality: options?.quality ?? 80,
      maxSize: options?.maxSize ?? 4096,
      fit: options?.fit ?? 'inside',
    }));
  }

  // cleanup document resources
  void document.cleanup();
  // wait for all image processing to complete
  return Promise.all(images);
}

export default { extractImages };

Web Implementation:

import type { PDFDocumentProxy } from 'pdfjs-dist/legacy/build/pdf.mjs';
import { getDocument, GlobalWorkerOptions, version } from 'pdfjs-dist/legacy/build/pdf.mjs';

import { adminQueries } from '@/services/aws';

// configure PDF.js worker with versioned filename
const baseUrl = `${globalThis.location.protocol}//${globalThis.location.host}`;
GlobalWorkerOptions.workerSrc = `${baseUrl}/pdf.worker.${version.replaceAll('.', '_')}.min.mjs`;

/**
 * Loads a PDF document from S3 storage using the provided file key.
 * Configures PDF.js with optimized settings for web rendering including
 * character maps, standard fonts, and WebAssembly support.
 */
export async function loadPdf(fileKey: string) {
  // get signed download URL from AWS S3
  const downloadUrl = await adminQueries<string>('/s3/download', { params: { fileKey } });

  return getDocument({
    url: downloadUrl,
    cMapUrl: `${baseUrl}/cmaps/`, // character encoding maps for international text
    cMapPacked: true, // use compressed character maps for faster loading
    standardFontDataUrl: `${baseUrl}/standard_fonts/`, // fallback fonts for missing typefaces
    useWasm: true, // enable WebAssembly for better performance
    wasmUrl: `${baseUrl}/wasm/`, // WebAssembly module location
    isImageDecoderSupported: false, // disable image decoder to avoid compatibility issues
    enableHWA: true, // enable hardware acceleration if available
  }).promise;
}

/**
 * Renders a specific page of a PDF document to a high-quality JPEG data URL.
 * Uses device pixel ratio for crisp rendering on high-DPI displays and proper
 * viewport scaling to fit within maximum dimensions while preserving quality.
 */
export async function renderPageToDataUrl(document: PDFDocumentProxy, index: number) {
  const page = await document.getPage(index);

  // calculate optimal scaling to fit within maximum dimensions
  const maxDimension = 2048;
  const v1x = page.getViewport({ scale: 1 });
  const scale = Math.max(maxDimension / v1x.width, maxDimension / v1x.height);
  const viewport = page.getViewport({ scale });

  // prepare canvas with device pixel ratio for sharp rendering
  const cssW = Math.ceil(viewport.width);
  const cssH = Math.ceil(viewport.height);
  const dpr = 'devicePixelRatio' in globalThis ? globalThis.devicePixelRatio : 1;

  const canvasFactory = document.canvasFactory as {
    create: (width: number, height: number) => {
      canvas: HTMLCanvasElement;
      context: CanvasRenderingContext2D;
    };
  };

  const { canvas, context } = canvasFactory.create(viewport.width, viewport.height);
  canvas.width = Math.floor(cssW * dpr); // actual pixel dimensions
  canvas.height = Math.floor(cssH * dpr);
  canvas.style.width = `${cssW}px`; // CSS dimensions for proper scaling
  canvas.style.height = `${cssH}px`;

  // render page with optimal content configuration
  const intent: 'display' | 'print' | 'any' = 'display';
  await page.render({
    canvas: null, // let PDF.js manage canvas properly
    canvasContext: context,
    viewport: viewport,
    transform: dpr === 1 ? undefined : [dpr, 0, 0, dpr, 0, 0], // apply device pixel ratio scaling
    intent: intent, // optimize for display rather than print
    optionalContentConfigPromise: document.getOptionalContentConfig({ intent }), // include layers and optional content
  }).promise;

  page.cleanup();

  // convert to compressed JPEG with good quality balance
  const result = canvas.toDataURL('image/jpeg', 0.8);
  canvas.width = canvas.height = 0; // free canvas memory
  canvas.remove();
  return result;
}

What is the expected behavior?

f29b97d7-f06d-4a74-918a-1eff107331dc.pdf

What went wrong?

blank page when rendering with Node

Link to a viewer

No response

Additional context

No response

[Snuffleupagus]

https://github.com/mozilla/pdf.js/blob/master/examples/node/pdf2png/pdf2png.mjs works: