pdf to png not rendering images on electron, works fine on plain Node

[fenicento]

I'm having a weird bug trying to save each page of a pdf as png. There is an example in the pdf.js library on this task, and it works fine in plain node (https://github.com/mozilla/pdf.js/blob/master/examples/node/pdf2png/pdf2png.mjs).

Anyway, the slighlty same code doesn't draw the images included in the pdf in the output pngs. I know that this could seem more related to pdf.js, but the fact that the rest of the pdf is correctly processed makes me think that it's more of a rendering issue.

For reference, this is my code:

const data = new Uint8Array(fs.readFileSync(file.inputPath));
        const loadingTask = pdfjs.getDocument(
            { 
                data, 
                cMapUrl: CMAP_URL,
                cMapPacked: CMAP_PACKED,
                standardFontDataUrl: STANDARD_FONT_DATA_URL,     
 
            });
        const pdfDocument = await loadingTask.promise;
        
        const numPages = pdfDocument.numPages;
        console.log(`PDF loaded. Number of pages: ${numPages}`);
        let progress = 0;

        
        // Process each page
        for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {
            if (signal?.aborted) {
                throw new Error('Conversion stopped by user');
            }

            const page = await pdfDocument.getPage(pageNumber);
            const viewport = page.getViewport({ scale: 3.0 }); // Higher scale for better quality
            
            // Create canvas and context
            const canvasFactory = pdfDocument.canvasFactory;
            const canvasAndContext = canvasFactory.create(viewport.width, viewport.height);

            // Render PDF page to canvas
            const renderContext = {
                canvasContext: canvasAndContext.context,
                viewport: viewport,
            };

            const renderTask = page.render(renderContext);
            await renderTask.promise;            

            // Convert canvas to buffer
            let imageBuffer = await canvasAndContext.canvas.toBuffer("image/png");
           fs.writeFile("output_"+pageNumber+".png", image, function (error) {
           if (error) {
              console.error("Error: " + error);
            } else {
              console.log("Finished converting first page of PDF file to a PNG image.");
           }
       });
}

Using this code with a pdf like this produces a white image, since the content is raster only.
I'm using electron v33 with node v20.18.0, napi-rs/canvas v0.1.64 on windows 11. Has anyone had similar issues?

[williamkbentley]

Hello - I'm attempting a very similar task and getting the same results. I am using node 22.15.0, @napi-rs/canvas 0.1.70, pdfjs-dist 5.2.133.
We're you able to figure out the issue with the raster only pdfs?

[ylc395]

This problem has been resolved since 0.1.73, thanks to @Brooooooklyn 🎉