qr-code-styling Is it possible to customize the QR Code more?

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.

Feb 12 '24 17:02 missakation

I love this feature to be in this package.

Jul 29 '24 13:07 samerlol

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.

Oct 19 '24 20:10 kozakdenys