@liquid-js/qr-code-styling
v4.0.3
Published
Generate styled QR codes on web or in Node
Downloads
4,604
Maintainers
hitkoReadme
QR Code Styling
JavaScript library for generating QR codes with customizable styling.
Try it here https://styled-qr.liquidjs.io/
Examples
Installation
npm install @liquid-js/qr-code-stylingAPI Documentation
https://liquid-js.github.io/qr-code-styling/
Usage
Browser
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>QR Code Styling</title>
</head>
<body>
<div id="canvas"></div>
<button type="button" id="dl">Download</button>
<script type="module">
import { QRCodeStyling, browserUtils } from "https://unpkg.com/@liquid-js/qr-code-styling/lib/qr-code-styling.js";
const qrCode = new QRCodeStyling({
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",
size: 10
},
backgroundOptions: {
color: "#e9ebee",
margin: 1
},
imageOptions: {
crossOrigin: "anonymous",
margin: 1,
imageSize: 0.5
}
});
qrCode.append(document.getElementById("canvas"));
document.getElementById("dl").addEventListener("click", () => {
browserUtils.download(qrCode, { extension: "png" }, { width: 1200, height: 1200 });
});
</script>
</body>
</html>Node
⚠️ Note: make sure to install optional peer dependencies when running on Node (not needed for browser environments)
npm install @xmldom/xmldom file-type @liquid-js/qrcode-generator sharp
import { QRCodeStyling } from "@liquid-js/qr-code-styling";
import { writeFile } from "fs/promises";
import PDFDocument from "pdfkit";
import SVGtoPDF from "svg-to-pdfkit";
const qrCode = new QRCodeStyling({
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",
size: 10
},
backgroundOptions: {
color: "#e9ebee",
margin: 1
},
imageOptions: {
crossOrigin: "anonymous",
margin: 1,
imageSize: 0.5
}
});
const svgCode = await qrCode.serialize();
const { width, height } = qrCode.size;
const buffers = [];
const doc = new PDFDocument({ size: [width, height] });
doc.on("data", (v) => buffers.push(v));
const buffer = await new Promise((resolve) => {
doc.on("end", () => {
resolve(Buffer.concat(buffers));
});
SVGtoPDF(doc, svgCode, 0, 0, {
width,
height,
assumePt: true
});
doc.end();
});
await writeFile("qr.pdf", buffer);Kanji support
For Kanji mode to work, import stringToBytesFuncs from @liquid-js/qr-code-styling/kanji and inclue it with config.
import { stringToBytesFuncs } from "@liquid-js/qr-code-styling/kanji";
const qrCode = new QRCodeStyling({
data: "漢字",
qrOptions: {
mode: Mode.kanji
},
stringToBytesFuncs
// ...other options
});