Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research Team - Dec 02, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
qr-border-plugin
Advanced tools
QR Border Plugin
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
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;", } }
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.
FAQs
Plugin for generating different borders of qr-code-styling
The npm package qr-border-plugin receives a total of 93 weekly downloads. As such, qr-border-plugin popularity was classified as not popular.
We found that qr-border-plugin demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Package last updated on 28 Oct 2024
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.
Related posts
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill Boychenko - Nov 27, 2024
Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
By Sarah Gooding - Nov 26, 2024