unpdf
unpdf copied to clipboard
unjs
'TypeError: r.translate is not a function' and 'Error: Missing field `a`'
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
- I use Gotenberg to convert a HTML file to a PDF. Some HTML elements use
background: repeating-linear-gradient; - I take this PDF and use
renderPageAsImage()to convert it to a PNG - 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)
I wonder if this really is a bug in unpdf or rather of the canvas renderer or even PDF.js itself.
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 👀
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'
}
}
