qr-code-styling
qr-code-styling copied to clipboard
imageSize does not respect image aspect ration
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%");
}