@liquid-js/qr-code-styling 2.0.2 → 2.0.4
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 +124 -101
- package/lib/core/QROptions.d.ts +0 -1
- package/lib/qr-code-styling-node.js +4 -3
- 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/types/index.d.ts +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,85 +1,94 @@
|
|
|
1
1
|
# QR Code Styling
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.org/package/qr-code-styling)
|
|
3
|
+
[](https://www.npmjs.org/package/@liquid-js/qr-code-styling)
|
|
4
4
|
|
|
5
5
|
JavaScript library for generating QR codes with a logo and styling.
|
|
6
6
|
|
|
7
|
-
Try it here https://qr-code-styling.com
|
|
7
|
+
Try it here <https://qr-code-styling.com>
|
|
8
8
|
|
|
9
9
|
If you have issues / suggestions / notes / questions, please open an issue or contact me. Let's create a cool library together.
|
|
10
10
|
|
|
11
11
|
### Examples
|
|
12
12
|
|
|
13
13
|
<p float="left">
|
|
14
|
-
<img style="display:inline-block" src="https://raw.githubusercontent.com/
|
|
15
|
-
<img style="display:inline-block" src="https://raw.githubusercontent.com/
|
|
16
|
-
<img style="display:inline-block" src="https://raw.githubusercontent.com/
|
|
14
|
+
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/facebook.png" width="240" />
|
|
15
|
+
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/qr-styling.png" width="240" />
|
|
16
|
+
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/telegram.png" width="240" />
|
|
17
17
|
</p>
|
|
18
18
|
|
|
19
19
|
### Installation
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
npm install qr-code-styling
|
|
23
|
-
```
|
|
21
|
+
npm install @liquid-js/qr-code-styling
|
|
24
22
|
|
|
25
23
|
### Usage
|
|
26
24
|
|
|
27
25
|
```HTML
|
|
28
|
-
<!
|
|
26
|
+
<!doctype html>
|
|
29
27
|
<html lang="en">
|
|
30
|
-
<head>
|
|
31
|
-
<meta charset="UTF-8"
|
|
28
|
+
<head>
|
|
29
|
+
<meta charset="UTF-8" />
|
|
32
30
|
<title>QR Code Styling</title>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
31
|
+
</head>
|
|
32
|
+
<body>
|
|
33
|
+
<div id="canvas"></div>
|
|
34
|
+
<script type="module">
|
|
35
|
+
import { QRCodeStyling } from "https://unpkg.com/@liquid-js/qr-code-styling/lib/qr-code-styling.js";
|
|
36
|
+
|
|
37
|
+
const options = {
|
|
38
|
+
shape: "circle",
|
|
39
|
+
type: "svg",
|
|
40
|
+
data: "h",
|
|
41
41
|
image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
|
|
42
42
|
dotsOptions: {
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
type: "extra-rounded",
|
|
44
|
+
gradient: {
|
|
45
|
+
type: "linear",
|
|
46
|
+
rotation: Math.PI / 2,
|
|
47
|
+
colorStops: [
|
|
48
|
+
{ offset: 0, color: "blue" },
|
|
49
|
+
{ offset: 0.5, color: "red" },
|
|
50
|
+
{ offset: 1, color: "green" }
|
|
51
|
+
]
|
|
52
|
+
}
|
|
45
53
|
},
|
|
46
|
-
|
|
47
|
-
|
|
54
|
+
cornersSquareOptions: {
|
|
55
|
+
type: "rounded",
|
|
56
|
+
gradient: {
|
|
57
|
+
type: "linear",
|
|
58
|
+
rotation: Math.PI * 0.2,
|
|
59
|
+
colorStops: [
|
|
60
|
+
{
|
|
61
|
+
offset: 0,
|
|
62
|
+
color: "blue"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
offset: 1,
|
|
66
|
+
color: "red"
|
|
67
|
+
}
|
|
68
|
+
]
|
|
69
|
+
}
|
|
48
70
|
},
|
|
49
71
|
imageOptions: {
|
|
50
|
-
|
|
51
|
-
|
|
72
|
+
crossOrigin: "anonymous",
|
|
73
|
+
imageSize: 1,
|
|
74
|
+
margin: 1
|
|
52
75
|
}
|
|
53
|
-
|
|
76
|
+
};
|
|
77
|
+
const qrCode = new QRCodeStyling(options);
|
|
54
78
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
</
|
|
58
|
-
</body>
|
|
79
|
+
qrCode.append(document.getElementById("canvas"));
|
|
80
|
+
</script>
|
|
81
|
+
</body>
|
|
59
82
|
</html>
|
|
60
83
|
```
|
|
61
84
|
|
|
62
|
-
---
|
|
63
|
-
|
|
64
|
-
[**React example (Codesandbox)**](https://codesandbox.io/s/qr-code-styling-react-example-l8rwl?file=/src/App.js)
|
|
65
|
-
|
|
66
|
-
[**Angular example (Codesandbox)**](https://codesandbox.io/s/agitated-panini-tpgb2?file=/src/app/app.component.ts)
|
|
67
|
-
|
|
68
|
-
---
|
|
69
|
-
|
|
70
|
-
[**React example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/react)
|
|
71
|
-
|
|
72
|
-
[**Angular example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/angular)
|
|
73
|
-
|
|
74
|
-
[**Vue example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/vue)
|
|
75
|
-
|
|
76
|
-
---
|
|
77
|
-
|
|
78
85
|
### API Documentation
|
|
79
86
|
|
|
80
87
|
#### QRCodeStyling instance
|
|
81
88
|
|
|
82
|
-
|
|
89
|
+
```js
|
|
90
|
+
new QRCodeStyling(options) => QRCodeStyling
|
|
91
|
+
```
|
|
83
92
|
|
|
84
93
|
| Param | Type | Description |
|
|
85
94
|
| ------- | ------ | ----------- |
|
|
@@ -87,48 +96,43 @@ npm install qr-code-styling
|
|
|
87
96
|
|
|
88
97
|
`options` structure
|
|
89
98
|
|
|
90
|
-
| Property
|
|
91
|
-
|
|
|
92
|
-
| data
|
|
93
|
-
| image
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
|
|
|
99
|
-
|
|
|
99
|
+
| Property | Type | Default Value | Description |
|
|
100
|
+
| -------------------- | ----------------- | ------------- | ---------------------------------------------------------- |
|
|
101
|
+
| data | string | | The date will be encoded to the QR code |
|
|
102
|
+
| image | string \| Blob | | The image will be copied to the center of the QR code |
|
|
103
|
+
| shape | string | `'square'` | QR code shape |
|
|
104
|
+
| qrOptions | object | | Options will be passed to `qrcode-generator` lib |
|
|
105
|
+
| imageOptions | object | | Specific image options, details see below |
|
|
106
|
+
| dotsOptions | object | | Dots styling options |
|
|
107
|
+
| cornersSquareOptions | object | | Square in the corners styling options |
|
|
108
|
+
| cornersDotOptions | object | | Dots in the corners styling options |
|
|
109
|
+
| backgroundOptions | object \| boolean | `false` | QR background styling options, false to disable background |
|
|
100
110
|
|
|
101
111
|
`options.qrOptions` structure
|
|
102
112
|
|
|
103
113
|
| Property | Type | Default Value |
|
|
104
114
|
| -------------------- | -------------------------------------------------- | ------------- |
|
|
105
115
|
| typeNumber | number (`0 - 40`) | `0` |
|
|
106
|
-
| mode | string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`) |
|
|
116
|
+
| mode | string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`) | |
|
|
107
117
|
| errorCorrectionLevel | string (`'L' 'M' 'Q' 'H'`) | `'Q'` |
|
|
108
118
|
|
|
109
119
|
`options.imageOptions` structure
|
|
110
120
|
|
|
111
|
-
| Property | Type
|
|
112
|
-
| ------------------ |
|
|
113
|
-
| hideBackgroundDots | boolean
|
|
114
|
-
| imageSize | number
|
|
115
|
-
| margin | number
|
|
116
|
-
| crossOrigin | string(`'anonymous' 'use-credentials'`) | | Set "anonymous" if you want to download QR code from other origins. |
|
|
121
|
+
| Property | Type | Default Value | Description |
|
|
122
|
+
| ------------------ | ---------------------------------------- | ------------- | ------------------------------------------------------------------------------ |
|
|
123
|
+
| hideBackgroundDots | boolean | `true` | Hide all dots covered by the image |
|
|
124
|
+
| imageSize | number | `0.4` | Coefficient of the image size. Not recommended to use ove 0.5. Lower is better |
|
|
125
|
+
| margin | number | `0` | Margin of the image (in blocks) |
|
|
126
|
+
| crossOrigin | string (`'anonymous' 'use-credentials'`) | | Set "anonymous" if you want to download QR code from other origins. |
|
|
117
127
|
|
|
118
128
|
`options.dotsOptions` structure
|
|
119
129
|
|
|
120
|
-
| Property | Type | Default Value | Description
|
|
121
|
-
| -------- | ------------------------------------------------------------------------------ | ------------- |
|
|
122
|
-
|
|
|
123
|
-
|
|
|
124
|
-
|
|
|
125
|
-
|
|
126
|
-
`options.backgroundOptions` structure
|
|
127
|
-
|
|
128
|
-
| Property | Type | Default Value |
|
|
129
|
-
| -------- | ------ | ------------- |
|
|
130
|
-
| color | string | `'#fff'` |
|
|
131
|
-
| gradient | object |
|
|
130
|
+
| Property | Type | Default Value | Description |
|
|
131
|
+
| -------- | ------------------------------------------------------------------------------ | ------------- | ----------------------- |
|
|
132
|
+
| size | number | `10` | QR dot size (in pixels) |
|
|
133
|
+
| color | string | `'#000'` | Color of QR dots |
|
|
134
|
+
| gradient | object | | Gradient of QR dots |
|
|
135
|
+
| type | string (`'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'`) | `'square'` | Style of QR dots |
|
|
132
136
|
|
|
133
137
|
`options.cornersSquareOptions` structure
|
|
134
138
|
|
|
@@ -146,6 +150,15 @@ npm install qr-code-styling
|
|
|
146
150
|
| gradient | object | | Gradient of Corners Dot |
|
|
147
151
|
| type | string (`'dot' 'square'`) | | Style of Corners Dot |
|
|
148
152
|
|
|
153
|
+
`options.backgroundOptions` structure
|
|
154
|
+
|
|
155
|
+
| Property | Type | Default Value | Description |
|
|
156
|
+
| -------- | ---------------- | ------------- | ----------------------------------------------------- |
|
|
157
|
+
| round | number (`0 - 1`) | `0` | Background roundnes |
|
|
158
|
+
| color | string | | |
|
|
159
|
+
| gradient | object | | |
|
|
160
|
+
| margin | number | `0` | Margin (in blocks) between background and the QR code |
|
|
161
|
+
|
|
149
162
|
Gradient structure
|
|
150
163
|
|
|
151
164
|
`options.dotsOptions.gradient`
|
|
@@ -158,7 +171,7 @@ Gradient structure
|
|
|
158
171
|
|
|
159
172
|
| Property | Type | Default Value | Description |
|
|
160
173
|
| ---------- | ---------------------------- | ------------- | --------------------------------------------------------------------------------------- |
|
|
161
|
-
| type | string (`'linear' 'radial'`) |
|
|
174
|
+
| type | string (`'linear' 'radial'`) | `'linear'` | Type of gradient spread |
|
|
162
175
|
| rotation | number | 0 | Rotation of gradient in radians (Math.PI === 180 degrees) |
|
|
163
176
|
| colorStops | array of objects | | Gradient colors. Example `[{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]` |
|
|
164
177
|
|
|
@@ -179,21 +192,29 @@ Gradient colorStops structure
|
|
|
179
192
|
|
|
180
193
|
#### QRCodeStyling methods
|
|
181
194
|
|
|
182
|
-
|
|
195
|
+
```js
|
|
196
|
+
QRCodeStyling.append(container) => void
|
|
197
|
+
```
|
|
183
198
|
|
|
184
199
|
| Param | Type | Description |
|
|
185
200
|
| --------- | ----------- | -------------------------------------------------------- |
|
|
186
201
|
| container | DOM element | This container will be used for appending of the QR code |
|
|
187
202
|
|
|
188
|
-
|
|
203
|
+
```js
|
|
204
|
+
QRCodeStyling.serialize() => Promise<string>
|
|
205
|
+
```
|
|
189
206
|
|
|
190
|
-
|
|
207
|
+
```js
|
|
208
|
+
QRCodeStyling.update(options) => void
|
|
209
|
+
```
|
|
191
210
|
|
|
192
211
|
| Param | Type | Description |
|
|
193
212
|
| ------- | ------ | -------------------------------------- |
|
|
194
213
|
| options | object | The same options as for initialization |
|
|
195
214
|
|
|
196
|
-
|
|
215
|
+
```js
|
|
216
|
+
QRCodeStyling.applyExtension(extension) => void
|
|
217
|
+
```
|
|
197
218
|
|
|
198
219
|
| Param | Type | Description |
|
|
199
220
|
| --------- | ---------------------- | ----------------------------------------------------------------------------------------- |
|
|
@@ -201,30 +222,32 @@ Gradient colorStops structure
|
|
|
201
222
|
|
|
202
223
|
`applyExtension` example
|
|
203
224
|
|
|
204
|
-
```
|
|
225
|
+
```js
|
|
205
226
|
const extension = (svg, options) => {
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
227
|
+
const { width, height } = options;
|
|
228
|
+
const size = Math.min(width, height);
|
|
229
|
+
const border = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
|
230
|
+
const borderAttributes = {
|
|
231
|
+
fill: "none",
|
|
232
|
+
x: (width - size + 40) / 2,
|
|
233
|
+
y: (height - size + 40) / 2,
|
|
234
|
+
width: size - 40,
|
|
235
|
+
height: size - 40,
|
|
236
|
+
stroke: "black",
|
|
237
|
+
"stroke-width": 40,
|
|
238
|
+
rx: 100
|
|
239
|
+
};
|
|
240
|
+
Object.keys(borderAttributes).forEach((attribute) => {
|
|
241
|
+
border.setAttribute(attribute, borderAttributes[attribute]);
|
|
242
|
+
});
|
|
243
|
+
svg.appendChild(border);
|
|
223
244
|
};
|
|
224
245
|
```
|
|
225
246
|
|
|
226
|
-
|
|
247
|
+
```js
|
|
248
|
+
QRCodeStyling.deleteExtension() => void
|
|
249
|
+
```
|
|
227
250
|
|
|
228
251
|
### License
|
|
229
252
|
|
|
230
|
-
[MIT License](https://
|
|
253
|
+
[MIT License](https://github.com/Liquid-JS/qr-code-styling/blob/master/LICENSE)
|
package/lib/core/QROptions.d.ts
CHANGED
|
@@ -165,7 +165,6 @@ const defaultOptions = {
|
|
|
165
165
|
shape: ShapeType.square,
|
|
166
166
|
width: undefined,
|
|
167
167
|
height: undefined,
|
|
168
|
-
margin: 0,
|
|
169
168
|
data: "",
|
|
170
169
|
qrOptions: {
|
|
171
170
|
typeNumber: TypeNumber[0],
|
|
@@ -905,7 +904,8 @@ class QRSVG {
|
|
|
905
904
|
}
|
|
906
905
|
}
|
|
907
906
|
if (options.shape === ShapeType.circle) {
|
|
908
|
-
const
|
|
907
|
+
const margin = (this._options.backgroundOptions && this._options.backgroundOptions.margin) || 0;
|
|
908
|
+
const additionalDots = Math.floor((minSize / dotSize - count - 2 * margin) / 2);
|
|
909
909
|
const fakeCount = count + additionalDots * 2;
|
|
910
910
|
const xFakeBeginning = xBeginning - additionalDots * dotSize;
|
|
911
911
|
const yFakeBeginning = yBeginning - additionalDots * dotSize;
|
|
@@ -1182,7 +1182,8 @@ let QRCodeStyling$1 = class QRCodeStyling {
|
|
|
1182
1182
|
return;
|
|
1183
1183
|
}
|
|
1184
1184
|
const count = Math.ceil((this._options.shape == ShapeType.circle ? Math.sqrt(2) : 1) * this._qr.getModuleCount());
|
|
1185
|
-
const
|
|
1185
|
+
const margin = (this._options.backgroundOptions && this._options.backgroundOptions.margin) || 0;
|
|
1186
|
+
const size = this._options.dotsOptions.size * (count + 2 * margin);
|
|
1186
1187
|
const qrSVG = new QRSVG({
|
|
1187
1188
|
...this._options,
|
|
1188
1189
|
width: size,
|