Type of qr-code must be "svg". For "canvas" type works correctly.
Moreover, settings of one reflects on another.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QR Code Styling</title>
<script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
</head>
<body>
<div id="qr_1" style="display: inline;"></div>
<div id="qr_2" style="display: inline;"></div>
<script type="text/javascript">
const qrCode1 = new QRCodeStyling({
width: 300,
height: 300,
type: "svg",
data: "https://www.facebook.com/",
image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
dotsOptions: {
color: "#4267b2",
type: "rounded"
},
backgroundOptions: {
color: "#e9ebee",
},
imageOptions: {
crossOrigin: "anonymous",
margin: 20
}
});
const qrCode2 = new QRCodeStyling({
width: 290,
height: 290,
type: "svg",
data: "https://www.google.com/",
dotsOptions: {
color: "#4267b2",
type: "rounded"
},
backgroundOptions: {
color: "#e9ebee",
},
imageOptions: {
crossOrigin: "anonymous",
margin: 20
}
});
qrCode1.append(document.getElementById("qr_1"));
qrCode2.append(document.getElementById("qr_2"));
//qrCode.download({ name: "qr", extension: "svg" });
</script>
</body>
</html>
Type of qr-code must be "svg". For "canvas" type works correctly.
Moreover, settings of one reflects on another.
For this code:
Expected:
Got:
Sample:
https://jsfiddle.net/mz0kwdp2/13/