kozakdenys / qr-code-styling

Automaticly generate your styled QR code in your web app.
https://qr-code-styling.com
MIT License
1.56k stars 499 forks source link

imageSize does not respect image aspect ration #144

Open sebastienb opened 2 years ago

sebastienb commented 2 years ago

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
        }
      });
IshaanRawat commented 1 year ago

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