Invalid Filter Algorithm

React-pdf version: ^1.0.0-alpha.25

Description: Some PNG images throw this error when trying to view the PDF.
The PDFViewer then renders a plain white background. the browser in use makes no difference.

png-js.browser.es.js:358 Uncaught Error: Invalid filter algorithm: 181
    at png-js.browser.es.js:358
    at Inflate.onEnd (index.js:225)
    at Inflate../node_modules/events/events.js.EventEmitter.emit (events.js:96)
    at endReadableNT (_stream_readable.js:1010)
    at afterTickTwo (index.js:27)
    at Item../node_modules/node-libs-browser/node_modules/process/browser.js.Item.run (browser.js:153)
    at drainQueue (browser.js:123)

I did some digging and found that there are a couple other PDF libraries which have suffered the same thing.

here is one of the more useful links: https://github.com/MrRio/jsPDF/issues/1452

I have other PNGs that work. and one that fails. I will try to edit the photo and see if I can make it work some other way.

[AirborneEagle]

I simply opened the image in an editor and saved a copy of it. The copy works. So I am not sure how the encoding changed, but I will go a head and close this issue. If someone else runs into this, then perhaps it can be re-opened.

[avneeshroks]

I found one workaround for this! The idea is to try to render the image with react-pdf on your parent component’s componentDidMount if it is a valid image then only render it in the actual pdf.

hasValidImageForPdf = false;

componentDidMount() { this.validateImageForPdf() }

validateImageForPdf() { const tempDoc = ( <Document> <Page> <Image src={this.imgUrl}></Image> </Page> </Document>); const pdfBlobProm = pdf(TempDoc).toBlob(); pdfBlobProm.then(data => { this.hasValidImageForPdf = true }).catch(error => { console.log('ERROR rendering image') }) }

Then use hasValidImageForPdf flag to conditionally render that image in your actual PDF render/export.

This worked for me! Hope this could be helpful.