question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@react-pdf/png-js doesn't support Adam 7 interlacing

See original GitHub issue

Describe the bug Using PNGs with Adam 7 interlacing throws the error Invalid filter which we’ve seen before in #391

To Reproduce I’m attaching an interlaced and non interlaced image. Using the interlaced image throws the above error.

const InterlacedPngPdf = () => (
  <Document>
    <Page>
      <Image
        src="https://i.imgur.com/wNI68lf.png"
      />
    </Page>
  </Document>
);

ReactPDF.render(<InterlacedPngPdf />);

Image - Noninterlaced

Exif data:

ExifTool Version Number : 11.60 File Name : BikeaidSG logo - photopea.png Directory : . File Size : 11 kB File Modification Date/Time : 2019:08:04 09:31:45+05:30 File Access Date/Time : 2019:08:04 10:19:10+05:30 File Inode Change Date/Time : 2019:08:04 09:31:53+05:30 File Permissions : rw-r–r– File Type : PNG File Type Extension : png MIME Type : image/png Image Width : 1280 Image Height : 720 Bit Depth : 8 Color Type : Palette Compression : Deflate/Inflate Filter : Adaptive Interlace : Noninterlaced SRGB Rendering : Relative Colorimetric Pixels Per Unit X : 3780 Pixels Per Unit Y : 3780 Pixel Units : meters Palette : (Binary data 132 bytes, use -b option to extract) Image Size : 1280x720 Megapixels : 0.922

Image - Adam 7 interlacing

Exif data:

ExifTool Version Number : 11.60 File Name : BikeaidSG logo.png Directory : . File Size : 17 kB File Modification Date/Time : 2019:08:04 09:31:05+05:30 File Access Date/Time : 2019:08:04 10:19:53+05:30 File Inode Change Date/Time : 2019:08:04 09:31:10+05:30 File Permissions : rw-r–r– File Type : PNG File Type Extension : png MIME Type : image/png Image Width : 1280 Image Height : 720 Bit Depth : 8 Color Type : Palette Compression : Deflate/Inflate Filter : Adaptive Interlace : Adam7 Interlace SRGB Rendering : Perceptual Gamma : 2.2 Palette : (Binary data 219 bytes, use -b option to extract) Transparency : (Binary data 73 bytes, use -b option to extract) Pixels Per Unit X : 3779 Pixels Per Unit Y : 3779 Pixel Units : meters Image Size : 1280x720 Megapixels : 0.922

Expected behavior The PNG should render.

Desktop (please complete the following information):

  • OS: [e.g. MacOS, Windows] MacOS
  • Browser [e.g. chrome, safari] chrome
  • React-pdf version [e.g. v1.1.0] 1.6.2

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:4
  • Comments:12

github_iconTop GitHub Comments

6reactions
geerthoekzemacommented, Apr 15, 2020

Just a little bump on this issue. Maybe it can be implemented in v2? I also experience this issue.

6reactions
derhylcommented, Jan 3, 2020

Any news of that issue ? THANKS!

Read more comments on GitHub >

github_iconTop Results From Across the Web

1 - Stack Overflow
Seems to be some issue with react-pdf dependencies. ./node_modules/@react-pdf/png-js/lib/png-js.browser.es.js 10116:106 Module parse failed ...
Read more >
Untitled
#mag Iconoclast book pdf, Adwaitham movie scenes, Ameland last minute, ... Center support platform bed, Planicies de moabe, Superflo racing heads?
Read more >
@react-pdf/png-js - npm
A PNG decoder in JS. Latest version: 2.2.0, last published: 3 months ago. Start using @react-pdf/png-js in your project by running `npm i ......
Read more >
UDN Search
the mediadevices.getusermedia() method prompts the user for permission to use a media input which produces a mediastream with tracks containing the requested ...
Read more >
@react-pdf/png-js examples - CodeSandbox
Learn how to use @react-pdf/png-js by viewing and forking @react-pdf/png-js example apps on CodeSandbox.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found