react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

Page backgroundColor renders slightly off

Open cpboyd opened this issue 3 years ago • 1 comments

Describe the bug As the title states, I believe this is an issue with colorspace DeviceRGB colors being rendered differently.

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

  1. Set the page style:
const styles = StyleSheet.create({
  page: {
    backgroundColor: '#64E0F6',
  },
})

or

const styles = StyleSheet.create({
  page: {
    backgroundColor: 'rgb(100, 224, 246)',
  },
})
  1. Add an image filled with the same color #64E0F6
  2. There's a distinction when rendered.

You can make use of react-pdf REPL to share the snippet

Expected behavior The background color should match the image.

Screenshots The page background is the top, the JPEG background is below. According to the digital color meter, the top (Page backgroundColor) is rgb(134, 221, 243) while the bottom is rgb(100, 224, 246) Screen Shot 2022-09-12 at 12 47 23 AM

Desktop (please complete the following information):

  • OS: macOS
  • Local
  • React-pdf version: 3.0.0

cpboyd avatar Sep 12 '22 04:09 cpboyd

After further investigation, it seems like images (JPEG or PNG) at least 151x151 pixels get treated differently than smaller images.

I tried simply stretching a static image to fit the background.

At 151x151 and above, the color matches the other JPG, but any smaller and it seems to follow the colorspace of the colors specified in the StyleSheet.

151x151 png: bg

cpboyd avatar Sep 12 '22 05:09 cpboyd