kozakdenys/qr-code-styling

imageSize does not respect image aspect ration

sebastienb opened this issue · 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
        }
      });

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%");
      }