The qr-border-plugin is an extension for the QR Code Styling library that adds customizable borders and decorations (such as text or images) to your QR codes.

You can install it and use in development without license. But you need to buy license key to use it in production, otherwise you will see watermark.

Examples

Features

Customizable inner and outer borders thickness, color, and roundness.
Add decorations (text or images) to any side of the QR code.
Supports custom fonts, styles, and images for decorations.

Installation

You can use the qr-border-plugin directly via CDN:

<script
  type="text/javascript"
  src="https://unpkg.com/qr-border-plugin"
></script>

Or, via npm registry

npm install qr-border-plugin

Usage

Here's an example of how to integrate the qr-border-plugin into your qr-code-styling:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>QR Code Styling</title>
    <script
      type="text/javascript"
      src="https://unpkg.com/qr-border-plugin@0.0.8"
    ></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/qr-code-styling@1.6.0-rc.1"
    ></script>
  </head>
  <body>
    <div id="canvas"></div>
    <script type="text/javascript">
      const options = {
        shape: "circle",
        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: 1,
          color: "#D5B882",
        },
        cornersSquareOptions: {
          type: "rounded",
        },
        cornersDotOptions: {
          type: "rounded",
        },
        imageOptions: {
          crossOrigin: "anonymous",
          margin: 20,
        },
      };

      const extensionOptions = {
        round: 1,
        thickness: 60,
        color: "#000000",
        decorations: {
          top: {
            type: "text",
            value: "SEE WHY IT'S SUPER",
            style: "font: 30px sans-serif; fill: #D5B882;",
          },
          bottom: {
            type: "text",
            value: "SCAN ME",
            style: "font: 30px sans-serif; fill: #D5B882;",
          },
        },
        borderInner: {
          color: "#000000",
          thickness: 10,
        },
        borderOuter: {
          color: "#000000",
          thickness: 10,
        },
      };

      const qrCode = new QRCodeStyling(options);

      // Apply the border extension
      qrCode.applyExtension(QRBorderPlugin(extensionOptions));

      // Set the license key (replace 'key' with your actual key)
      QRBorderPlugin.setKey("key");

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

Extension Options

The extensionOptions object allows you to customize the border and decorations of the QR code. Here's a breakdown of the properties:

`round`

Type: number
Description: Roundness of the QR code's borders. Accepts values between 0 and 1.
Example: round: 1

`thickness`

Type: number
Description: The thickness of the QR code's border.
Example: thickness: 60

`color`

Type: string
Description: Color of the QR code's border.
Example: color: "#000000"

`dasharray`

Type: string
Description: Optional dasharray for a dashed border.
Example: dasharray: "4 1"

`decorations`

Type: object
Description: Allows adding text or image decorations to any side of the QR code.
Properties: top, bottom, left, right
- Type: object
- Property type
  - Type: string
  - Description: Type of decoration. Can be text or image.
- Property value
  - Type: string
  - Description: The text or image URL.
- Property style
  - Type: string
  - Description: Custom CSS for the decoration.

Example:

decorations: {
  top: {
    type: "text",
    value: "SEE WHY IT'S SUPER",
    style: "font: 30px sans-serif; fill: #D5B882;",
  }
}

`borderInner`

Type: object
Description: Customizable inner border of the QR code.
Properties: thickness, color, dasharray

`borderOuter`

Type: object
Description: Customizable outer border of the QR code.
Properties: thickness, color, dasharray

License Verification

The qr-border-plugin includes license verification using the Lefe License. To use the plugin without watermarking, you need to set a valid license key using:

QRBorderPlugin.setKey("your_license_key");

Watermark

If no valid license is provided, a watermark will be added to the generated QR code. This watermark is removed when a valid key is used.

Contributing

Feel free to open an issue if you have any improvements or suggestions for qr-border-plugin.

License

This project is under Commercial License. You need to buy license key to use it in production.

Keywords

FAQs

What is qr-border-plugin?

Is qr-border-plugin popular?

Is qr-border-plugin well maintained?

Package last updated on 09 Jan 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

qr-border-plugin

QR Border Plugin

Examples

Features

Installation

Usage

Extension Options

round

thickness

color

dasharray

decorations

borderInner

borderOuter