'TypeError: r.translate is not a function' and 'Error: Missing field `a`'

[AndreasMietk]

Environment

Node v22.6.0
Nuxt v3.17.5

Reproduction

/server/pdf-to-image.ts

import { defineEventHandler, EventHandlerRequest, H3Event, setHeader } from 'h3'
import formidable from 'formidable'
import { renderPageAsImage } from 'unpdf'
import { readFile } from 'node:fs/promises'

export default defineEventHandler(async (event: H3Event<EventHandlerRequest>) => {
  const form = formidable({})
  const [_, files] = await form.parse(event.node.req)

  const file_tmp = files.file[0]
  const file = await readFile(file_tmp.filepath)
  const fileUInt8 = new Uint8Array(file.buffer)

  const imageRaw = await renderPageAsImage(fileUInt8, 1, { canvasImport: () => import('@napi-rs/canvas') })
  const image = new Buffer(imageRaw)

  const filenamePng = (file_tmp.originalFilename as string).replace('.pdf', '.png')

  setHeader(event, 'Content-Type', 'image/png')
  setHeader(event, 'Content-Disposition', `inline; filename="${filenamePng}"`)
  return image
})

Describe the bug

1. I use Gotenberg to convert a HTML file to a PDF. Some HTML elements use background: repeating-linear-gradient;
2. I take this PDF and use renderPageAsImage() to convert it to a PNG
3. This does trigger the mentioned errors

Additional context

When i use the node example of PDF.js it works though, and gets rendered to a PNG. BUT the linear-gradient elements are displayed as pink boxes.

import { createCanvas } from '@napi-rs/canvas'
import { getDocument } from 'pdfjs-dist/legacy/build/pdf.mjs'

async function pdf2image_pdfjs(data: Uint8Array): Promise<Buffer<ArrayBufferLike>> {
  // Some PDFs need external cmaps.
  const CMAP_URL = '../../node_modules/pdfjs-dist/cmaps/'
  const CMAP_PACKED = true

  // Where the standard fonts are located.
  const STANDARD_FONT_DATA_URL = '../../node_modules/pdfjs-dist/standard_fonts/'

  // Load the PDF file.
  const loadingTask = getDocument({
    data,
    cMapUrl: CMAP_URL,
    cMapPacked: CMAP_PACKED,
    standardFontDataUrl: STANDARD_FONT_DATA_URL,
  })

  const pdfDocument = await loadingTask.promise
  console.log('# PDF document loaded.')
  // Get the first page.
  const page = await pdfDocument.getPage(1)
  // Render the page on a Node canvas with 100% scale.
  const viewport = page.getViewport({ scale: 1.0 })
  const canvas = createCanvas(viewport.width, viewport.height)
  const canvasContext = canvas.getContext('2d')!
  const renderContext = {
    canvasContext,
    viewport,
  }

  const renderTask = page.render(renderContext)
  await renderTask.promise
  // Convert the canvas to an image buffer.
  const image = canvas.toBuffer('image/png')

  // Release page resources.
  page.cleanup()
  return image
}

Logs

Warning: Please use the legacy build in Node.js environments.
Missing field a

    at RadialAxialShadingPattern.getPattern (node_modules/unpdf/dist/pdfjs.mjs:1:1121246)
    at CanvasGraphics.fill (node_modules/unpdf/dist/pdfjs.mjs:1:1145294)
    at CanvasGraphics.eoFill (node_modules/unpdf/dist/pdfjs.mjs:1:1145668)
    at CanvasGraphics.constructPath (node_modules/unpdf/dist/pdfjs.mjs:1:1144454)
    at CanvasGraphics.executeOperatorList (node_modules/unpdf/dist/pdfjs.mjs:1:1134684)
    at TilingPattern.createPatternCanvas (node_modules/unpdf/dist/pdfjs.mjs:1:1125679)
    at TilingPattern.getPattern (node_modules/unpdf/dist/pdfjs.mjs:1:1127089)
    at CanvasGraphics.fill (node_modules/unpdf/dist/pdfjs.mjs:1:1145294)
    at CanvasGraphics.constructPath (node_modules/unpdf/dist/pdfjs.mjs:1:1144454)
    at CanvasGraphics.executeOperatorList (node_modules/unpdf/dist/pdfjs.mjs:1:1134684)
Missing field a

    at RadialAxialShadingPattern.getPattern (node_modules/unpdf/dist/pdfjs.mjs:1:1121246)
    at CanvasGraphics.fill (node_modules/unpdf/dist/pdfjs.mjs:1:1145294)
    at CanvasGraphics.eoFill (node_modules/unpdf/dist/pdfjs.mjs:1:1145668)
    at CanvasGraphics.constructPath (node_modules/unpdf/dist/pdfjs.mjs:1:1144454)
    at CanvasGraphics.executeOperatorList (node_modules/unpdf/dist/pdfjs.mjs:1:1134684)
    at TilingPattern.createPatternCanvas (node_modules/unpdf/dist/pdfjs.mjs:1:1125679)
    at TilingPattern.getPattern (node_modules/unpdf/dist/pdfjs.mjs:1:1127089)
    at CanvasGraphics.fill (node_modules/unpdf/dist/pdfjs.mjs:1:1145294)
    at CanvasGraphics.constructPath (node_modules/unpdf/dist/pdfjs.mjs:1:1144454)
    at CanvasGraphics.executeOperatorList (node_modules/unpdf/dist/pdfjs.mjs:1:1134684)
Missing field a

    at RadialAxialShadingPattern.getPattern (node_modules/unpdf/dist/pdfjs.mjs:1:1121246)
    at CanvasGraphics.fill (node_modules/unpdf/dist/pdfjs.mjs:1:1145294)
    at CanvasGraphics.eoFill (node_modules/unpdf/dist/pdfjs.mjs:1:1145668)
    at CanvasGraphics.constructPath (node_modules/unpdf/dist/pdfjs.mjs:1:1144454)
    at CanvasGraphics.executeOperatorList (node_modules/unpdf/dist/pdfjs.mjs:1:1134684)
    at TilingPattern.createPatternCanvas (node_modules/unpdf/dist/pdfjs.mjs:1:1125679)
    at TilingPattern.getPattern (node_modules/unpdf/dist/pdfjs.mjs:1:1127089)
    at CanvasGraphics.fill (node_modules/unpdf/dist/pdfjs.mjs:1:1145294)
    at CanvasGraphics.constructPath (node_modules/unpdf/dist/pdfjs.mjs:1:1144454)
    at CanvasGraphics.executeOperatorList (node_modules/unpdf/dist/pdfjs.mjs:1:1134684)
Warning: FormatError: Unsupported ShadingType: 1
Warning: FormatError: Unsupported ShadingType: 1
Warning: FormatError: Unsupported ShadingType: 1
Warning: FormatError: Unsupported ShadingType: 1
Warning: FormatError: Unsupported ShadingType: 1 (repeated 10 times)
r.translate is not a function

    at TilingPattern.getPattern (node_modules/unpdf/dist/pdfjs.mjs:1:1127139)
    at CanvasGraphics.fill (node_modules/unpdf/dist/pdfjs.mjs:1:1145294)
    at CanvasGraphics.constructPath (node_modules/unpdf/dist/pdfjs.mjs:1:1144454)
    at CanvasGraphics.executeOperatorList (node_modules/unpdf/dist/pdfjs.mjs:1:1134684)
    at InternalRenderTask._next (node_modules/unpdf/dist/pdfjs.mjs:1:1230514)

[johannschopplich]

I wonder if this really is a bug in unpdf or rather of the canvas renderer or even PDF.js itself.

[AndreasMietk]

TBH, I haven't spent much time debugging the unpdf code since I use the workaround I mentioned. I only use the image output for PDF thumbnails, where the pink artifacts are less noticeable and don't bother me as much 👀

[BartaValentin]

I realized the same issue, do you have any update?

$ ts-node pdf-bug.ts
Warning: Please use the `legacy` build in Node.js environments.
Error generating thumbnail: PdfThumbnailCreationError: Generating PDF thumbnail failed.
    at generatePdfThumbnail (...\generate-pdf-thumbnail\src\generate-pdf-thumbnail.ts:20:11)
    at async generateThumbnail (...\generate-pdf-thumbnail\src\pdf-bug.ts:9:29)
    at async ...\pdf-functions\generate-pdf-thumbnail\src\pdf-bug.ts:18:19
Caused By: Error: Missing field `a`
    at RadialAxialShadingPattern.getPattern (file://.../node_modules/unpdf/dist/pdfjs.mjs:1:1120786)
    ... 8 lines matching cause stack trace ...
    at CanvasGraphics.executeOperatorList (file:///.../node_modules/unpdf/dist/pdfjs.mjs:1:1134224) {
  cause: Error: Missing field `a`
      at RadialAxialShadingPattern.getPattern (file:///.../node_modules/unpdf/dist/pdfjs.mjs:1:1120786)
      at CanvasGraphics.fill (file:///.../node_modules/unpdf/dist/pdfjs.mjs:1:1144834)
      at CanvasGraphics.eoFill (file:///.../unpdf/dist/pdfjs.mjs:1:1145208)
      at CanvasGraphics.constructPath (file:///.../unpdf/dist/pdfjs.mjs:1:1143994)
      at CanvasGraphics.executeOperatorList (file:///.../unpdf/dist/pdfjs.mjs:1:1134224)
      at TilingPattern.createPatternCanvas (file:///.../node_modules/unpdf/dist/pdfjs.mjs:1:1125219)
      at TilingPattern.getPattern (file:///.../node_modules/unpdf/dist/pdfjs.mjs:1:1126629)
      at CanvasGraphics.fill (file:///.../node_modules/unpdf/dist/pdfjs.mjs:1:1144834)
      at CanvasGraphics.constructPath (file:///.../node_modules/unpdf/dist/pdfjs.mjs:1:1143994)
      at CanvasGraphics.executeOperatorList (file:///.../node_modules/unpdf/dist/pdfjs.mjs:1:1134224) {
    code: 'InvalidArg'
  }
}