Skip to content

[Bug]: Font is not render correctly when rendering into image #20653

@tc-at-rp

Description

@tc-at-rp

Attach (recommended) or Link to PDF file

History of Chocolate in Dubai.pdf

Web browser and its version

Node v24.3.0

Operating system and its version

masOS 26.2

PDF.js version

5.4.624

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

Yes

Is a browser extension

No

Steps to reproduce the problem

  1. Here is the function is used to render pdf into image
export async function fromPdfToImages(pdfBuffer: Buffer) {
  const document = await pdfjs.getDocument({
    data: new Uint8Array(pdfBuffer),
    cMapUrl: `${pdfjsBaseUrl}/cmaps/`,
    cMapPacked: true,
    standardFontDataUrl: `${pdfjsBaseUrl}/standard_fonts/`,
    useSystemFonts: true,
  }).promise
  const renderPageAsImage = async (pageNum) => {
    const page = await document.getPage(pageNum)
    const canvasFactory = document.canvasFactory as any
    const viewport = page.getViewport({ scale: 2.0 })
    const canvasAndContext = canvasFactory.create(viewport.width, viewport.height)
    const renderContext = {
      canvasContext: canvasAndContext.context,
      viewport,
    }
    const renderTask = page.render(renderContext as any)
    await renderTask.promise
    const image = canvasAndContext.canvas.toBuffer('image/png')
    const jpg = await sharp(image).jpeg({ quality: 85, mozjpeg: true }).toBuffer()
    page.cleanup()
    return jpg
  }

  const images: {
    pageNumber: number
    buffer: Buffer
  }[] = []
  for (let pageNum = 1; pageNum <= Math.min(document.numPages, MAX_PAGES_TO_PROCESS); pageNum++) {
    try {
      const imageBuffer = await renderPageAsImage(pageNum)
      images.push({ pageNumber: pageNum, buffer: imageBuffer })
    } catch (error) {
      log.error(`Error rendering page ${pageNum} of PDF:`, error instanceof Error ? error.message : String(error))
    }
  }
  return images
}
  1. Using NodeJS v24, make use of this function to convert the uploaded pdf into image

What is the expected behavior?

It should render properly like:

Image

What went wrong?

The pdf render into images like this...
Image

Link to a viewer

No response

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions