qr-code-styling icon indicating copy to clipboard operation
qr-code-styling copied to clipboard

imageSize does not respect image aspect ration

Open sebastienb opened this issue 2 years ago • 1 comments

When using the imageOptions Image size, the images resize but get stretched. to reproduce, generate a qr code with a rectangular image then set a size of say .5. The qr image will shrink but the aspect ration of the rectangle will be different than the original rectangle.

Here are the options I'm using:

const qrCode = new QRCodeStyling({
        width: 500,
        height: 500,
        type: "svg",
        data: "https://google.com/",
        image: "some image",
        dotsOptions: {
            color: "some color",
            
        },
        backgroundOptions: {
            color: "#FFFFFF",
        },
        imageOptions: {
            imageSize: .5,
            margin: 20
        }
      });

sebastienb avatar Aug 22 '22 14:08 sebastienb

The issue is with the svg file that is being created. I did the following to solve the issue.

      const qrCodeSVG = qrContainer?.querySelector("svg");
      if (qrCodeSVG) {
        qrCodeSVG.setAttribute("viewBox", "0 0 500 500");
        qrCodeSVG.setAttribute("width", "100%");
        qrCodeSVG.setAttribute("height", "100%");
      }

IshaanRawat avatar Jan 30 '23 13:01 IshaanRawat