@liquid-js/qr-code-styling 3.0.0 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +137 -137
- package/lib/qr-code-styling-node.js +7 -7
- package/lib/qr-code-styling-node.js.map +1 -1
- package/lib/qr-code-styling.js +1 -1
- package/lib/qr-code-styling.js.map +1 -1
- package/lib/utils/options.d.ts +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,137 +1,137 @@
|
|
|
1
|
-
# QR Code Styling
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.org/package/@liquid-js/qr-code-styling)
|
|
4
|
-
|
|
5
|
-
JavaScript library for generating QR codes with customizable styling.
|
|
6
|
-
|
|
7
|
-
Try it here <https://styled-qr.liquidjs.io/>
|
|
8
|
-
|
|
9
|
-
## Examples
|
|
10
|
-
|
|
11
|
-
<p float="left">
|
|
12
|
-
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/facebook.png" width="240" />
|
|
13
|
-
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/qr-styling.png" width="240" />
|
|
14
|
-
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/telegram.png" width="240" />
|
|
15
|
-
</p>
|
|
16
|
-
|
|
17
|
-
## Installation
|
|
18
|
-
|
|
19
|
-
npm install @liquid-js/qr-code-styling
|
|
20
|
-
|
|
21
|
-
## API Documentation
|
|
22
|
-
|
|
23
|
-
<https://liquid-js.github.io/qr-code-styling/>
|
|
24
|
-
|
|
25
|
-
## Usage
|
|
26
|
-
|
|
27
|
-
### Browser
|
|
28
|
-
|
|
29
|
-
```HTML
|
|
30
|
-
<!doctype html>
|
|
31
|
-
<html lang="en">
|
|
32
|
-
<head>
|
|
33
|
-
<meta charset="UTF-8" />
|
|
34
|
-
<title>QR Code Styling</title>
|
|
35
|
-
</head>
|
|
36
|
-
<body>
|
|
37
|
-
<div id="canvas"></div>
|
|
38
|
-
<button type="button" id="dl">Download</button>
|
|
39
|
-
<script type="module">
|
|
40
|
-
import { QRCodeStyling, browserUtils } from "https://unpkg.com/@liquid-js/qr-code-styling/lib/qr-code-styling.js";
|
|
41
|
-
|
|
42
|
-
const qrCode = new QRCodeStyling({
|
|
43
|
-
data: "https://www.facebook.com/",
|
|
44
|
-
image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
|
|
45
|
-
dotsOptions: {
|
|
46
|
-
color: "#4267b2",
|
|
47
|
-
type: "rounded",
|
|
48
|
-
size: 10
|
|
49
|
-
},
|
|
50
|
-
backgroundOptions: {
|
|
51
|
-
color: "#e9ebee",
|
|
52
|
-
margin: 1
|
|
53
|
-
},
|
|
54
|
-
imageOptions: {
|
|
55
|
-
crossOrigin: "anonymous",
|
|
56
|
-
margin: 1,
|
|
57
|
-
imageSize: 0.5
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
qrCode.append(document.getElementById("canvas"));
|
|
62
|
-
|
|
63
|
-
document.getElementById("dl").addEventListener("click", () => {
|
|
64
|
-
browserUtils.download(qrCode, { extension: "png" }, { width: 1200, height: 1200 });
|
|
65
|
-
});
|
|
66
|
-
</script>
|
|
67
|
-
</body>
|
|
68
|
-
</html>
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
### Node
|
|
72
|
-
|
|
73
|
-
```js
|
|
74
|
-
import { QRCodeStyling } from "@liquid-js/qr-code-styling";
|
|
75
|
-
import { writeFile } from "fs/promises";
|
|
76
|
-
import PDFDocument from "pdfkit";
|
|
77
|
-
import SVGtoPDF from "svg-to-pdfkit";
|
|
78
|
-
|
|
79
|
-
const qrCode = new QRCodeStyling({
|
|
80
|
-
data: "https://www.facebook.com/",
|
|
81
|
-
image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
|
|
82
|
-
dotsOptions: {
|
|
83
|
-
color: "#4267b2",
|
|
84
|
-
type: "rounded",
|
|
85
|
-
size: 10
|
|
86
|
-
},
|
|
87
|
-
backgroundOptions: {
|
|
88
|
-
color: "#e9ebee",
|
|
89
|
-
margin: 1
|
|
90
|
-
},
|
|
91
|
-
imageOptions: {
|
|
92
|
-
crossOrigin: "anonymous",
|
|
93
|
-
margin: 1,
|
|
94
|
-
imageSize: 0.5
|
|
95
|
-
}
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
const svgCode = await qrCode.serialize();
|
|
99
|
-
|
|
100
|
-
const { width, height } = qrCode.size;
|
|
101
|
-
const buffers = [];
|
|
102
|
-
const doc = new PDFDocument({ size: [width, height] });
|
|
103
|
-
doc.on("data", (v) => buffers.push(v));
|
|
104
|
-
const buffer = await new Promise((resolve) => {
|
|
105
|
-
doc.on("end", () => {
|
|
106
|
-
resolve(Buffer.concat(buffers));
|
|
107
|
-
});
|
|
108
|
-
SVGtoPDF(doc, svgCode, 0, 0, {
|
|
109
|
-
width,
|
|
110
|
-
height,
|
|
111
|
-
assumePt: true
|
|
112
|
-
});
|
|
113
|
-
doc.end();
|
|
114
|
-
});
|
|
115
|
-
await writeFile("qr.pdf", buffer);
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
### Kanji support
|
|
119
|
-
|
|
120
|
-
For Kanji mode to work, import `stringToBytesFuncs` from `@liquid-js/qr-code-styling/kanji` and inclue it with config.
|
|
121
|
-
|
|
122
|
-
```js
|
|
123
|
-
import { stringToBytesFuncs } from "@liquid-js/qr-code-styling/kanji";
|
|
124
|
-
|
|
125
|
-
const qrCode = new QRCodeStyling({
|
|
126
|
-
data: "漢字",
|
|
127
|
-
qrOptions: {
|
|
128
|
-
mode: Mode.kanji
|
|
129
|
-
},
|
|
130
|
-
stringToBytesFuncs
|
|
131
|
-
// ...other options
|
|
132
|
-
});
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
## License
|
|
136
|
-
|
|
137
|
-
[MIT License](https://github.com/Liquid-JS/qr-code-styling/blob/master/LICENSE)
|
|
1
|
+
# QR Code Styling
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.org/package/@liquid-js/qr-code-styling)
|
|
4
|
+
|
|
5
|
+
JavaScript library for generating QR codes with customizable styling.
|
|
6
|
+
|
|
7
|
+
Try it here <https://styled-qr.liquidjs.io/>
|
|
8
|
+
|
|
9
|
+
## Examples
|
|
10
|
+
|
|
11
|
+
<p float="left">
|
|
12
|
+
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/facebook.png" width="240" />
|
|
13
|
+
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/qr-styling.png" width="240" />
|
|
14
|
+
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/telegram.png" width="240" />
|
|
15
|
+
</p>
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
npm install @liquid-js/qr-code-styling
|
|
20
|
+
|
|
21
|
+
## API Documentation
|
|
22
|
+
|
|
23
|
+
<https://liquid-js.github.io/qr-code-styling/>
|
|
24
|
+
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
### Browser
|
|
28
|
+
|
|
29
|
+
```HTML
|
|
30
|
+
<!doctype html>
|
|
31
|
+
<html lang="en">
|
|
32
|
+
<head>
|
|
33
|
+
<meta charset="UTF-8" />
|
|
34
|
+
<title>QR Code Styling</title>
|
|
35
|
+
</head>
|
|
36
|
+
<body>
|
|
37
|
+
<div id="canvas"></div>
|
|
38
|
+
<button type="button" id="dl">Download</button>
|
|
39
|
+
<script type="module">
|
|
40
|
+
import { QRCodeStyling, browserUtils } from "https://unpkg.com/@liquid-js/qr-code-styling/lib/qr-code-styling.js";
|
|
41
|
+
|
|
42
|
+
const qrCode = new QRCodeStyling({
|
|
43
|
+
data: "https://www.facebook.com/",
|
|
44
|
+
image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
|
|
45
|
+
dotsOptions: {
|
|
46
|
+
color: "#4267b2",
|
|
47
|
+
type: "rounded",
|
|
48
|
+
size: 10
|
|
49
|
+
},
|
|
50
|
+
backgroundOptions: {
|
|
51
|
+
color: "#e9ebee",
|
|
52
|
+
margin: 1
|
|
53
|
+
},
|
|
54
|
+
imageOptions: {
|
|
55
|
+
crossOrigin: "anonymous",
|
|
56
|
+
margin: 1,
|
|
57
|
+
imageSize: 0.5
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
qrCode.append(document.getElementById("canvas"));
|
|
62
|
+
|
|
63
|
+
document.getElementById("dl").addEventListener("click", () => {
|
|
64
|
+
browserUtils.download(qrCode, { extension: "png" }, { width: 1200, height: 1200 });
|
|
65
|
+
});
|
|
66
|
+
</script>
|
|
67
|
+
</body>
|
|
68
|
+
</html>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Node
|
|
72
|
+
|
|
73
|
+
```js
|
|
74
|
+
import { QRCodeStyling } from "@liquid-js/qr-code-styling";
|
|
75
|
+
import { writeFile } from "fs/promises";
|
|
76
|
+
import PDFDocument from "pdfkit";
|
|
77
|
+
import SVGtoPDF from "svg-to-pdfkit";
|
|
78
|
+
|
|
79
|
+
const qrCode = new QRCodeStyling({
|
|
80
|
+
data: "https://www.facebook.com/",
|
|
81
|
+
image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
|
|
82
|
+
dotsOptions: {
|
|
83
|
+
color: "#4267b2",
|
|
84
|
+
type: "rounded",
|
|
85
|
+
size: 10
|
|
86
|
+
},
|
|
87
|
+
backgroundOptions: {
|
|
88
|
+
color: "#e9ebee",
|
|
89
|
+
margin: 1
|
|
90
|
+
},
|
|
91
|
+
imageOptions: {
|
|
92
|
+
crossOrigin: "anonymous",
|
|
93
|
+
margin: 1,
|
|
94
|
+
imageSize: 0.5
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
const svgCode = await qrCode.serialize();
|
|
99
|
+
|
|
100
|
+
const { width, height } = qrCode.size;
|
|
101
|
+
const buffers = [];
|
|
102
|
+
const doc = new PDFDocument({ size: [width, height] });
|
|
103
|
+
doc.on("data", (v) => buffers.push(v));
|
|
104
|
+
const buffer = await new Promise((resolve) => {
|
|
105
|
+
doc.on("end", () => {
|
|
106
|
+
resolve(Buffer.concat(buffers));
|
|
107
|
+
});
|
|
108
|
+
SVGtoPDF(doc, svgCode, 0, 0, {
|
|
109
|
+
width,
|
|
110
|
+
height,
|
|
111
|
+
assumePt: true
|
|
112
|
+
});
|
|
113
|
+
doc.end();
|
|
114
|
+
});
|
|
115
|
+
await writeFile("qr.pdf", buffer);
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Kanji support
|
|
119
|
+
|
|
120
|
+
For Kanji mode to work, import `stringToBytesFuncs` from `@liquid-js/qr-code-styling/kanji` and inclue it with config.
|
|
121
|
+
|
|
122
|
+
```js
|
|
123
|
+
import { stringToBytesFuncs } from "@liquid-js/qr-code-styling/kanji";
|
|
124
|
+
|
|
125
|
+
const qrCode = new QRCodeStyling({
|
|
126
|
+
data: "漢字",
|
|
127
|
+
qrOptions: {
|
|
128
|
+
mode: Mode.kanji
|
|
129
|
+
},
|
|
130
|
+
stringToBytesFuncs
|
|
131
|
+
// ...other options
|
|
132
|
+
});
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## License
|
|
136
|
+
|
|
137
|
+
[MIT License](https://github.com/Liquid-JS/qr-code-styling/blob/master/LICENSE)
|
|
@@ -43,9 +43,9 @@ function sanitizeGradient(gradient_newGradient) {
|
|
|
43
43
|
|
|
44
44
|
(GradientType = GradientType || (GradientType = {})).radial = "radial", GradientType.linear = "linear",
|
|
45
45
|
(DotType = DotType || (DotType = {})).dot = "dot", DotType.randomDot = "random-dot",
|
|
46
|
-
DotType.rounded = "rounded", DotType.
|
|
47
|
-
DotType.
|
|
48
|
-
DotType.
|
|
46
|
+
DotType.rounded = "rounded", DotType.extraRounded = "extra-rounded", DotType.verticalLine = "vertical-line",
|
|
47
|
+
DotType.horizontalLine = "horizontal-line", DotType.classy = "classy", DotType.classyRounded = "classy-rounded",
|
|
48
|
+
DotType.square = "square", DotType.smallSquare = "small-square", DotType.diamond = "diamond",
|
|
49
49
|
(CornerDotType = CornerDotType || (CornerDotType = {})).dot = "dot", CornerDotType.square = "square",
|
|
50
50
|
CornerDotType.heart = "heart", CornerDotType.extraRounded = "extra-rounded", CornerDotType.classy = "classy",
|
|
51
51
|
CornerDotType.outpoint = "outpoint", CornerDotType.inpoint = "inpoint", (CornerSquareType = CornerSquareType || (CornerSquareType = {})).dot = "dot",
|
|
@@ -189,7 +189,7 @@ class QRCornerDot {
|
|
|
189
189
|
let {size, x, y} = args;
|
|
190
190
|
this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
191
191
|
let move = !1, i = 0;
|
|
192
|
-
this._element.setAttribute("d", [ "M",
|
|
192
|
+
this._element.setAttribute("d", [ "M", 1, .3262506, "c", 0, .0383376, -.0064626, .0758377, -.0193751, .1125001, "s", -.0356247, .076875, -.0681248, .1206252, "c", -.0325, .0437499, -.0762503, .0931247, -.1312501, .1481249, "C", .7262502, .7625008, .6566626, .8279132, .5724999, .9037505, "L", .5, .9687506, "L", .4275001, .9037505, "C", .3433374, .8279132, .2737499, .7625005, .21875, .7075007, "C", .1637501, .6525008, .1199999, .6031258, .0874999, .5593758, "S", .0322876, .4754133, .0193751, .4387506, "S", 0, .3645881, 0, .3262506, "c", 0, -.0783374, .0262499, -.1437498, .07875, -.1962499, "s", .1179124, -.07875, .1962499, -.07875, "c", .0433376, 0, .0845875, .0091625, .12375, .0274999, "S", .4716623, .1229131, .5, .1562506, "c", .0283374, -.0333375, .0620874, -.0591625, .1012502, -.0775, "c", .0391627, -.0183375, .0804126, -.0274999, .12375, -.0274999, "c", .0783374, 0, .1437497, .0262499, .1962501, .07875, "S", 1, .2479131, 1, .3262506, "z" ].map((v => "string" == typeof v ? (i = 0,
|
|
193
193
|
move = v.toUpperCase() == v, v) : (i++, v *= size, move && (v += 1 == i % 2 ? x : y),
|
|
194
194
|
numToAttr(v)))).join(" "));
|
|
195
195
|
}
|
|
@@ -243,9 +243,9 @@ class QRCornerDot {
|
|
|
243
243
|
}
|
|
244
244
|
drawHeart({x, y, size, rotation}) {
|
|
245
245
|
this.basicHeart({
|
|
246
|
-
x
|
|
247
|
-
y
|
|
248
|
-
size
|
|
246
|
+
x,
|
|
247
|
+
y,
|
|
248
|
+
size,
|
|
249
249
|
rotation
|
|
250
250
|
});
|
|
251
251
|
}
|