Throws "Invalid filter algorithm" error on some PNG images

[diminutivesloop]

When attempting to generate a pdf with this image jsPDF throws an error:

Uncaught Error: Invalid filter algorithm: 100
    at e.decodePixels (jspdf.min.js:286)
    at Object.t.processPNG (jspdf.min.js:282)
    at Object.t.addImage (jspdf.min.js:281)

I've created an example bin to illustrate the issue: http://jsbin.com/nujiyebamu/edit?html,js,output

[Uzlopak]

Probably easier to open the file in mspaint copy & paste it into a new file and saving it again as png/jpg. The png algorythm is not very good in jspdf.

[diminutivesloop]

Well for the application I develop we don't have any control over the images we render to PDF. We have to generate preview images for arbitrary websites and we often use the image specified in the site's meta tags. Right now we just catch errors thrown by addImage so we can continue rendering the remaining content without the offending image and fortunately the majority of images we process don't seem to have this issue.

[Uzlopak]

Well, I looked yesterday how much work it would be to fix the PNG Plugin to work with all PNGs... Seems to be a little bit more work, because I would have to read into PNG specs to know what I am doing in the PNG-Plugin.

[diminutivesloop]

Totally understand. This isn't an urgent issues, but I just thought I'd put it out there in case someone more familiar with the PNG spec wanted to contribute a fix.

[Uzlopak]

Ok, I think I know now what the issue is:
the used png-lib does not support Adam7 Interlacing.

So I guess, you have to deinterlace it first with Adam7 and then pass the Buffer to the decodePixels Methode to process the interlaced png correctly.

https://de.wikipedia.org/wiki/Adam7
foliojs/png.js#8
http://yahoo.github.io/pngjs-image/docs/files/lib_png_processor_interlace.js.html

[Uzlopak]

PullRequest #1455

[Uzlopak]

Adam7 Interlacing is now part of jspdf.

[denis-lukin]

If someone still doesn't know what to do, you can try this:

const convertImgToBase64URL = (url, outputFormat) =>
    new Promise((resolve, reject) => {
        const img = new Image();
        img.crossOrigin = 'Anonymous';
        img.onerror = (e) => {
            reject(e);
        };
        img.onload = function () {
            let canvas = document.createElement('CANVAS');
            const ctx = canvas.getContext('2d');
            let dataURL;
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            dataURL = canvas.toDataURL(outputFormat);
            canvas = null;
            resolve({ dataURL });
        };
        img.src = url;
    });

const imageBase64 = convertImgToBase64URL('/assets/images/your_image.png');

after that just use this for image rendering:

<Image src={imageBase64.dataURL} />