PNG image quality degradation and rendering issues in 3.0.2 due to fast-png integration

[vulture9]

Description:

Problem Summary
After upgrading from jsPDF 3.0.1 to 3.0.2, certain PNG images rendered from base64 data appear severely blurred/corrupted in the generated PDF, while the same images render perfectly in 3.0.1.

Root Cause Analysis
The issue appears to be related to the integration of fast-png library in version 3.0.2. The fast-png parser has stricter PNG format compliance requirements and different image processing behavior compared to the previous PNG handling in 3.0.1.

Reproduction
Works in: 3.0.1
Broken in: 3.0.2+
Image format: PNG base64
Behavior: Some PNG images render correctly, others become blurred/corrupted

Do you have an idea why it is happening, are you aware about it?

It happens for the images 16-bit PNG,
8-bit PNG works fine.

I have tried with loading local project asset and via external URL with the same effect.
no projeblems in version 3.0.1

fast-png seems not to be handling 16-bit images well, would be nice to have a proper check on your side and fallback with some canvas processing solution with conversion to jpeg, unless you have some other suggestions and I`m missing something?

Looks like soley reliance on fast-png might be a mistake...

[ReeceTrolley-HRS]

+1 I am also experiencing this; trying to render PNG inside a PDF from a data URL is corrupted, and even throws a warning if using Acrobat to view.

[HackbrettXXX]

Thank you for the bug report.

Please provide some example images that end up corrupted in the PDF. Can you narrow it down further: what kind of images are corrupted? With alpha channel or without? Only 16-bit? Does it only happen when passing the images as Base64 URL?

Can you reproduce issues when using fast-png standalone? E.g. try decoding then encoding an image with fast-png.

[ReeceTrolley-HRS]

Here's a minimum example; personally I am seeing this issue with static google maps generated images.

Image in question:

PDF in question:
bad-pdf.pdf

Code to add picture to PDF:

// Example static map from Google's docs; API key removed
const staticMapUrl =
  "https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=300x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=...";

window.addEventListener("DOMContentLoaded", () => {
  async function fetchMapAndSave() {
    const mapBlob = await (await fetch(staticMapUrl.toString())).blob();
    const mapBase64 = await new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => resolve(reader.result);
      reader.onerror = reject;
      reader.readAsDataURL(mapBlob);
    });

    const doc = new window.jspdf.jsPDF();

    doc.addImage(mapBase64, "PNG", 0, 0, 100, 100);

    doc.save("bad-png.pdf");
  }
  fetchMapAndSave();
});

Viewing the PDF in Chrome/Edge, it sort of displays but is blurry/looks awful:

Firefox displays nothing; and Acrobat shows a warning, and no content.

[HackbrettXXX]

Thanks, have you tried passing it as an UInt8Array instead of a base64 URL?

[ReeceTrolley-HRS]

Just tried and same issue:

const response = await fetch(staticMapUrl.toString());
const arrayBuffer = await response.arrayBuffer();
const uint8Array = new Uint8Array(arrayBuffer);

const doc = new window.jspdf.jsPDF();
// Pass Uint8Array directly to addImage
doc.addImage(uint8Array, "PNG", 0, 0, 100, 100);
doc.save("bad-png.pdf");

bad-pdf-uint8.pdf

[HackbrettXXX]

I've prepared a PR (#3887), could you check if it fixes the issues? Please note that the files in dist are not up to date in the PR. They are only updated for the release.

[ReeceTrolley-HRS]

@HackbrettXXX for my test example; #3887 fixes the issue! Amazing work so quickly 👍

[vulture9]

Will try to check it tomorrow if I'll find time, sorry for late replay was away, but if others confirm that is fixing a problem then great to hear. Will double check with my 16bits data or will make it available for you to test

[vulture9]

I have given a test, unfortunatelly it did not work. here is a link to the image, which might help in verification https://drive.google.com/file/d/1DxbFSj3KGR3uyyEK0Nv9W-UcULf330qL/view?usp=drive_link

[HackbrettXXX]

@vulture9 thank you for testing it. The image you provided works with the changes in the PR (and was broken before). Did you run npm run build before testing (see my previous comment)?

[vulture9]

@HackbrettXXX sorry my bad did not run build. It works fine now. Thanks for quick action and handle the ticket. Tried to be precised, glad that could help to keep lib in a good shape.