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.
- 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.
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-pluginHere'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>The extensionOptions object allows you to customize the border and decorations of the QR code. Here's a breakdown of the properties:
-
Type:
number - Description: Roundness of the QR code's borders. Accepts values between 0 and 1.
-
Example:
round: 1
-
Type:
number - Description: The thickness of the QR code's border.
-
Example:
thickness: 60
-
Type:
string - Description: Color of the QR code's border.
-
Example:
color: "#000000"
-
Type:
string - Description: Optional dasharray for a dashed border.
-
Example:
dasharray: "4 1"
-
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
textorimage.
-
Type:
-
Property
value-
Type:
string - Description: The text or image URL.
-
Type:
-
Property
style-
Type:
string - Description: Custom CSS for the decoration.
-
Type:
-
Type:
-
Example:
decorations: { top: { type: "text", value: "SEE WHY IT'S SUPER", style: "font: 30px sans-serif; fill: #D5B882;", } }
-
Type:
object - Description: Customizable inner border of the QR code.
-
Properties:
thickness,color,dasharray
-
Type:
object - Description: Customizable outer border of the QR code.
-
Properties:
thickness,color,dasharray
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");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.
Feel free to open an issue if you have any improvements or suggestions for qr-border-plugin.
This project is under Commercial License. You need to buy license key to use it in production.
