Skip to content

Overlay image getting blurred when trying to watermark it on a background image #231

@kaykecastrosi

Description

@kaykecastrosi

Describe the bug
I'm trying to watermark a QRCode with the resolution of 500x500 on top of a background image, but when the image returns, the QRCode gets blurred.

To Reproduce
Steps to reproduce the behavior:

const plottedIMG = await Marker.markImage({
  backgroundImage: {
    src: backgroundImgURI,
    scale: 1,
  },
  watermarkImages: [
    {
      src: `data:image/png;base64,${QRCode.base64}`,
      //Using scale 0.2 to get the final resolution of 100x100
      scale: 0.2,
      position: {
        X: imgWidth - IOS_CONFIG.marginX,
        Y: imgHeight - 100 - IOS_CONFIG.marginY,
      },
    },
  ],
  quality: 100,
  saveFormat: ImageFormat.jpg,
});

Expected behavior
Expected to have an image with a high quality

Devlopment environment(please complete the following information):

  • OS: MacoS
  • nodejs: 18.12.1
  • react-native: 0.71.13
  • react-native-image-marker : ^1.2.6

Smartphone (please complete the following information):

  • Device: iPhone XR
  • OS: 17.5.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions