Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Two svg-typed qr-codes in one page. Generates same qr-code for all two instances. #2

Open
Humo8668 opened this issue Jun 28, 2022 · 0 comments
Open

Two svg-typed qr-codes in one page. Generates same qr-code for all two instances. #2

Humo8668 opened this issue Jun 28, 2022 · 0 comments

Comments

@Humo8668
Copy link

Humo8668 commented Jun 28, 2022 •
edited
Loading

Type of qr-code must be "svg". For "canvas" type works correctly.
Moreover, settings of one reflects on another.

For this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QR Code Styling</title>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/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>

Expected:
image

Got:
image

Sample:
https://jsfiddle.net/mz0kwdp2/13/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Humo8668