qr-code-styling
Advanced tools
The qr-code-styling npm package allows you to generate customizable QR codes with various styles and options. It provides a flexible way to create QR codes with different shapes, colors, and logos, making it suitable for branding and design purposes.
Basic QR Code Generation
This feature allows you to generate a basic QR code with customizable dimensions, data, and dot styles. The code sample demonstrates how to create a QR code with rounded dots and a white background, append it to a canvas element, and download it as a PNG file.
const QRCodeStyling = require('qr-code-styling');
const qrCode = new QRCodeStyling({
width: 300,
height: 300,
data: 'https://example.com',
image: '',
dotsOptions: {
color: '#000000',
type: 'rounded'
},
backgroundOptions: {
color: '#ffffff'
}
});
qrCode.append(document.getElementById('canvas'));
qrCode.download({ name: 'qr', extension: 'png' });Adding a Logo to QR Code
This feature allows you to add a logo to the center of the QR code. The code sample demonstrates how to include a logo image, set its cross-origin attribute, and define a margin around the logo.
const QRCodeStyling = require('qr-code-styling');
const qrCode = new QRCodeStyling({
width: 300,
height: 300,
data: 'https://example.com',
image: 'https://example.com/logo.png',
dotsOptions: {
color: '#000000',
type: 'rounded'
},
imageOptions: {
crossOrigin: 'anonymous',
margin: 20
}
});
qrCode.append(document.getElementById('canvas'));
qrCode.download({ name: 'qr_with_logo', extension: 'png' });Customizing QR Code Colors
This feature allows you to customize the colors of the QR code dots and background. The code sample demonstrates how to create a QR code with red square dots and a green background.
const QRCodeStyling = require('qr-code-styling');
const qrCode = new QRCodeStyling({
width: 300,
height: 300,
data: 'https://example.com',
dotsOptions: {
color: '#ff0000',
type: 'square'
},
backgroundOptions: {
color: '#00ff00'
}
});
qrCode.append(document.getElementById('canvas'));
qrCode.download({ name: 'colored_qr', extension: 'png' });The qrcode package is a simple and lightweight library for generating QR codes. It supports basic customization options such as size, error correction level, and color. However, it lacks the advanced styling options and logo integration features provided by qr-code-styling.
The qr-image package allows you to create QR codes in various image formats such as PNG, SVG, and PDF. It offers basic customization options but does not provide the extensive styling capabilities of qr-code-styling, such as custom dot shapes and logo integration.
The easyqrcodejs package is a versatile library for generating QR codes with a wide range of customization options, including logo integration, color customization, and various dot styles. It is similar to qr-code-styling in terms of features but may have a different API and usage patterns.
JavaScript library for generating QR codes with a logo and styling.
Try it here https://qr-code-styling.com
If you have issues / suggestions / notes / questions, please open an issue or contact me. Let's create a cool library together.
npm install 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-code-styling/lib/qr-code-styling.js"></script>
</head>
<body>
<div id="canvas"></div>
<script type="text/javascript">
const qrCode = new QRCodeStyling({
width: 300,
height: 300,
data: "https://www.facebook.com/",
image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
dotsOptions: {
color: "#4267b2",
type: "rounded"
},
backgroundOptions: {
color: "#e9ebee",
},
imageOptions: {
crossOrigin: "anonymous",
margin: 20
}
});
qrCode.append(document.getElementById("canvas"));
</script>
</body>
</html>
new QRCodeStyling(options) => QRCodeStyling
| Param | Type | Description |
|---|---|---|
| options | object | Init object |
options structure
| Property | Type | Default Value | Description |
|---|---|---|---|
| width | number | 300 | Size of canvas |
| height | number | 300 | Size of canvas |
| data | string | The date will be encoded to the QR code | |
| image | string | The image will be copied to the center of the QR code | |
| qrOptions | object | Options will be passed to qrcode-generator lib | |
| imageOptions | object | Specific image options, details see below | |
| dotsOptions | object | Dots styling options | |
| cornersSquareOptions | object | Square in the corners styling options | |
| cornersDotOptionsHelper | object | Dots in the corners styling options | |
| backgroundOptions | object | QR background styling options |
options.qrOptions structure
| Property | Type | Default Value |
|---|---|---|
| typeNumber | number (0 - 40) | 0 |
| mode | string ('Numeric' 'Alphanumeric' 'Byte' 'Kanji') | |
| errorCorrectionLevel | string ('L' 'M' 'Q' 'H') | 'Q' |
options.imageOptions structure
| Property | Type | Default Value | Description |
|---|---|---|---|
| hideBackgroundDots | boolean | true | Hide all dots covered by the image |
| imageSize | number | 0.4 | Coefficient of the image size. Not recommended to use ove 0.5. Lower is better |
| margin | number | 0 | Margin of the image in px |
| crossOrigin | string('anonymous' 'use-credentials') | Set "anonymous" if you want to download QR code from other origins. |
options.dotsOptions structure
| Property | Type | Default Value | Description |
|---|---|---|---|
| color | string | '#000' | Color of QR dots |
| gradient | object | Gradient of QR dots | |
| type | string ('rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded') | 'square' | Style of QR dots |
options.backgroundOptions structure
| Property | Type | Default Value |
|---|---|---|
| color | string | '#fff' |
| gradient | object |
options.cornersSquareOptions structure
| Property | Type | Default Value | Description |
|---|---|---|---|
| color | string | Color of Corners Square | |
| gradient | object | Gradient of Corners Square | |
| type | string ('dot' 'square' 'extra-rounded') | Style of Corners Square |
options.cornersDotOptions structure
| Property | Type | Default Value | Description |
|---|---|---|---|
| color | string | Color of Corners Dot | |
| gradient | object | Gradient of Corners Dot | |
| type | string ('dot' 'square') | Style of Corners Dot |
Gradient structure
options.dotsOptions.gradient
options.backgroundOptions.gradient
options.cornersSquareOptions.gradient
options.cornersDotOptions.gradient
| Property | Type | Default Value | Description |
|---|---|---|---|
| type | string ('linear' 'radial') | "linear" | Type of gradient spread |
| rotation | number | 0 | Rotation of gradient in radians (Math.PI === 180 degrees) |
| colorStops | array of objects | Gradient colors. Example [{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }] |
Gradient colorStops structure
options.dotsOptions.gradient.colorStops[]
options.backgroundOptions.gradient.colorStops[]
options.cornersSquareOptions.gradient.colorStops[]
options.cornersDotOptions.gradient.colorStops[]
| Property | Type | Default Value | Description |
|---|---|---|---|
| offset | number (0 - 1) | Position of color in gradient range | |
| color | string | Color of stop in gradient range |
QRCodeStyling.append(container) => void
| Param | Type | Description |
|---|---|---|
| container | DOM element | This container will be used for appending of the QR code |
QRCodeStyling.update(options) => void
| Param | Type | Description |
|---|---|---|
| options | object | The same options as for initialization |
QRCodeStyling.download(downloadOptions) => void
| Param | Type | Description |
|---|---|---|
| downloadOptions | object | Options with extension and name of file (not required) |
downloadOptions structure
| Property | Type | Default Value | Description |
|---|---|---|---|
| name | string | 'qr' | Name of the downloaded file |
| extension | string ('png' 'jpeg' 'webp') | 'png' | File extension |
MIT License. Copyright (c) 2021 Denys Kozak
FAQs
Add a style and an image to your QR code
The npm package qr-code-styling receives a total of 105,897 weekly downloads. As such, qr-code-styling popularity was classified as popular.
We found that qr-code-styling demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.