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

Is it possible to customize the QR Code more? #198

Open
missakation opened this issue Feb 12, 2024 · 2 comments
Open

Is it possible to customize the QR Code more? #198

missakation opened this issue Feb 12, 2024 · 2 comments
Labels
enhancement New feature or request

Comments

@missakation
Copy link

missakation commented Feb 12, 2024 •
edited
Loading

Not an issue but a question. I have seen in other platforms where you can customize the shape of the eyes, such as make it a star, heart, sun, and diamond shapes. How is it possible to achieve those?

I have also seen some places where you can add frames surrounding the qrcode such as "SCAN ME" and these kind of stuff.

If you can guide me on this, it would be very helpful!

Thanks.
@samerlol
Copy link

I love this feature to be in this package.

@kozakdenys
Copy link
Owner

Hi @missakation @samerlol sorry for missing for so long 🥹

Here is open PRs with additional dot styles so I will merge it soon.

In version v1.6.0 and above was introduced applyExtension method, you can find it in the documentation.

extension is a function that takes svg and options and can modify them.

Using example from documentation you can create border like this:

Code example 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>QR Code Styling</title>
  </head>

  <body>
    <div id="canvas"></div>

    <script type="text/javascript">
      const options = {
        type: "svg",
        width: 500,
        height: 500,
        margin: 70,
        data: "test",
        image:
          "https://qr-code-styling.com/b9eac011a0558695563d6081a8395ccb.png",
        dotsOptions: {
          type: "dots",
          color: "#000000",
        },
        backgroundOptions: {
          round: 0.5,
          color: "#D5B882",
        },
        cornersSquareOptions: {
          type: "rounded",
        },
        cornersDotOptions: {
          type: "rounded",
        },
        imageOptions: {
          saveAsBlob: true,
          crossOrigin: "anonymous",
          margin: 20,
        },
      };

      const qrCode = new QRCodeStyling(options);

      const extension = (svg, options) => {
        const { width, height } = options;
        const size = Math.min(width, height);
        const border = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        const borderAttributes = {
          "fill": "none",
          "x": (width - size + 40) / 2,
          "y": (height - size + 40) / 2,
          "width": size - 40,
          "height": size - 40,
          "stroke": 'black',
          "stroke-width": 40,
          "rx": 100,
        };
        Object.keys(borderAttributes).forEach(attribute => {
          border.setAttribute(attribute, borderAttributes[attribute]);
        });
        svg.appendChild(border);
      };

      qrCode.applyExtension(extension);

      qrCode.append(document.getElementById("canvas"));
    </script>
  </body>
</html>

But if you want to support this project you can use my qr-border-plugin. It is more customizable and I will add more examples soon.

@kozakdenys kozakdenys added the enhancement New feature or request label Oct 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@missakation @kozakdenys @samerlol