PNG image that gets corrupted when embedded

[isc]

Hi,

Thank you for this library which seems to fit perfectly to our needs.

We do have an issue though when we try to embed a PNG image.
The following image is displayed correctly in a browser or on my system Preview app: https://i.postimg.cc/q7qD277r/signature.png
However when embedded in a PDF with PDF-lib, the image gets corrupted as you can see in the modified JSFiddle demo:
https://jsfiddle.net/0uk2qbax/1/

Is it something in our PNG file that prevents it from being properly displayed once embedded with PDF-lib?

Thank you in advance for your help

[Hopding]

Hello @isc!

I was able to reproduce the issue. I suspect it does have something to do with the specific PNG image you are trying to embed. However, that does not mean your image is invalid. It is likely a bug in the PNG parsing library used by pdf-lib.

I am planning to replace the current PNG parsing library with a different one as soon as I have time (see #307). We'll see if that resolves this issue as well.

I tried exporting your image using Preview (File -> Export). I was able to embed the exported version of your PNG file without any problems. The purpose of exporting in this case is to rewrite the PNG in a more standard format, and remove whatever features it originally had that were tripping up pdf-lib's PNG parser. If you need to do this in an automated way, you might be able to use https://github.com/lukeapage/pngjs to load and rewrite the image. (This is, of course, a workaround until the issue with our PNG parser can be fixed).

[isc]

Thank you for the prompt answer.
We found out that the image gets unusable with pdf-lib once we apply some specific effects from the Cloudinary API (https://cloudinary.com/documentation/image_transformation_reference#effect_parameter).
Namely the "colorize" effect and the "vectorize" effect.
We have worked around the issue by changing the mix of transformations we apply to the image before trying to embed it in a PDF.

[demalmar]

I don't know if it is related, but I'm having the isse with PNG : Error: Invalid filter algorithm: 16. I have tried with many PNG and they all give error with different numbers, in example 40. I don't know what else to do to make this work.

[Hopding]

@demalmar Yes, I would expect that the errors you're encountering are due to this bug. I'm working on getting this fixed, but haven't had much time to devote to it. One workaround would be to "rewrite" you PNG images such that they are no longer interlaced, prior to embedding them. I haven't done it myself, but I'd suggest trying to use https://github.com/lukeapage/pngjs to load and rewrite the images if you need to do so in an automated way. However, if you have a static set of images that needs to be converted, you can try doing so with image editors/viewers (as I explained above: #324 (comment)).

[Hopding]

@isc @demalmar Just wanted to update you guys on this. Today I finished swapping out png-ts for upng-js (see the UpdatePngLib branch). I confirmed that it is able to successfully embed the image you shared. I need to add more tests and then I plan to merge the branch. This fix should go out in the next release of pdf-lib.

[Hopding]

@isc @demalmar Version 1.3.2 is now published. It contains the fix for this issue. The full release notes are available here.

You can install this new version with npm:

npm install pdf-lib@1.3.2

It's also available on unpkg:

• https://unpkg.com/pdf-lib@1.3.2/dist/pdf-lib.js
• https://unpkg.com/pdf-lib@1.3.2/dist/pdf-lib.min.js

As well as jsDelivr:

• https://cdn.jsdelivr.net/npm/pdf-lib@1.3.2/dist/pdf-lib.js
• https://cdn.jsdelivr.net/npm/pdf-lib@1.3.2/dist/pdf-lib.min.js