@liquid-js/qr-code-styling 2.0.1 → 2.0.3

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.
Files changed (5) hide show
  1. package/README.md +124 -101
  2. package/lib/qr-code-styling-node.js.map +1 -1
  3. package/lib/qr-code-styling.js +1 -1
  4. package/lib/qr-code-styling.js.map +1 -1
  5. package/package.json +7 -8
package/README.md CHANGED
@@ -1,85 +1,94 @@
1
1
  # QR Code Styling
2
2
 
3
- [![Version](https://img.shields.io/npm/v/qr-code-styling.svg)](https://www.npmjs.org/package/qr-code-styling)
3
+ [![Version](https://img.shields.io/npm/v/@liquid-js/qr-code-styling.svg)](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/kozakdenys/qr-code-styling/master/src/assets/facebook_example_new.png" width="240" />
15
- <img style="display:inline-block" src="https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/qr_code_example.png" width="240" />
16
- <img style="display:inline-block" src="https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/telegram_example_new.png" width="240" />
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
- <!DOCTYPE html>
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
- <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
34
- </head>
35
- <body>
36
- <div id="canvas"></div>
37
- <script type="text/javascript">
38
-
39
- const qrCode = new QRCodeStyling.QRCodeStyling({
40
- data: "https://www.facebook.com/",
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
- color: "#4267b2",
44
- type: "rounded"
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
- backgroundOptions: {
47
- color: "#e9ebee",
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
- crossOrigin: "anonymous",
51
- margin: 1
72
+ crossOrigin: "anonymous",
73
+ imageSize: 1,
74
+ margin: 1
52
75
  }
53
- });
76
+ };
77
+ const qrCode = new QRCodeStyling(options);
54
78
 
55
- qrCode.append(document.getElementById("canvas"));
56
- QRCodeStyling.browserUtils.download(qrCode);
57
- </script>
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
- `new QRCodeStyling(options) => QRCodeStyling`
89
+ ```js
90
+ new QRCodeStyling(options) => QRCodeStyling
91
+ ```
83
92
 
84
93
  | Param | Type | Description |
85
94
  | ------- | ------ | ----------- |
@@ -87,48 +96,44 @@ npm install qr-code-styling
87
96
 
88
97
  `options` structure
89
98
 
90
- | Property | Type | Default Value | Description |
91
- | ----------------------- | ------ | ------------- | ----------------------------------------------------- |
92
- | data | string | | The date will be encoded to the QR code |
93
- | image | string | | The image will be copied to the center of the QR code |
94
- | qrOptions | object | | Options will be passed to `qrcode-generator` lib |
95
- | imageOptions | object | | Specific image options, details see below |
96
- | dotsOptions | object | | Dots styling options |
97
- | cornersSquareOptions | object | | Square in the corners styling options |
98
- | cornersDotOptionsHelper | object | | Dots in the corners styling options |
99
- | backgroundOptions | object | | QR background styling options |
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 |
110
+ | margin | number | `0` | Margin (in blocks) to add to the code |
100
111
 
101
112
  `options.qrOptions` structure
102
113
 
103
114
  | Property | Type | Default Value |
104
115
  | -------------------- | -------------------------------------------------- | ------------- |
105
116
  | typeNumber | number (`0 - 40`) | `0` |
106
- | mode | string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`) |
117
+ | mode | string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`) | |
107
118
  | errorCorrectionLevel | string (`'L' 'M' 'Q' 'H'`) | `'Q'` |
108
119
 
109
120
  `options.imageOptions` structure
110
121
 
111
- | Property | Type | Default Value | Description |
112
- | ------------------ | --------------------------------------- | ------------- | ------------------------------------------------------------------------------ |
113
- | hideBackgroundDots | boolean | `true` | Hide all dots covered by the image |
114
- | imageSize | number | `0.4` | Coefficient of the image size. Not recommended to use ove 0.5. Lower is better |
115
- | margin | number | `0` | Margin of the image in blocks |
116
- | crossOrigin | string(`'anonymous' 'use-credentials'`) | | Set "anonymous" if you want to download QR code from other origins. |
122
+ | Property | Type | Default Value | Description |
123
+ | ------------------ | ---------------------------------------- | ------------- | ------------------------------------------------------------------------------ |
124
+ | hideBackgroundDots | boolean | `true` | Hide all dots covered by the image |
125
+ | imageSize | number | `0.4` | Coefficient of the image size. Not recommended to use ove 0.5. Lower is better |
126
+ | margin | number | `0` | Margin of the image (in blocks) |
127
+ | crossOrigin | string (`'anonymous' 'use-credentials'`) | | Set "anonymous" if you want to download QR code from other origins. |
117
128
 
118
129
  `options.dotsOptions` structure
119
130
 
120
- | Property | Type | Default Value | Description |
121
- | -------- | ------------------------------------------------------------------------------ | ------------- | ------------------- |
122
- | color | string | `'#000'` | Color of QR dots |
123
- | gradient | object | | Gradient of QR dots |
124
- | type | string (`'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'`) | `'square'` | Style of QR dots |
125
-
126
- `options.backgroundOptions` structure
127
-
128
- | Property | Type | Default Value |
129
- | -------- | ------ | ------------- |
130
- | color | string | `'#fff'` |
131
- | gradient | object |
131
+ | Property | Type | Default Value | Description |
132
+ | -------- | ------------------------------------------------------------------------------ | ------------- | ----------------------- |
133
+ | size | number | `10` | QR dot size (in pixels) |
134
+ | color | string | `'#000'` | Color of QR dots |
135
+ | gradient | object | | Gradient of QR dots |
136
+ | type | string (`'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'`) | `'square'` | Style of QR dots |
132
137
 
133
138
  `options.cornersSquareOptions` structure
134
139
 
@@ -146,6 +151,14 @@ npm install qr-code-styling
146
151
  | gradient | object | | Gradient of Corners Dot |
147
152
  | type | string (`'dot' 'square'`) | | Style of Corners Dot |
148
153
 
154
+ `options.backgroundOptions` structure
155
+
156
+ | Property | Type | Default Value | Description |
157
+ | -------- | ---------------- | ------------- | ------------------- |
158
+ | round | number (`0 - 1`) | `0` | Background roundnes |
159
+ | color | string | | |
160
+ | gradient | object | | |
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'`) | "linear" | Type of gradient spread |
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
- `QRCodeStyling.append(container) => void`
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
- `QRCodeStyling.serialize() => Promise<string>`
203
+ ```js
204
+ QRCodeStyling.serialize() => Promise<string>
205
+ ```
189
206
 
190
- `QRCodeStyling.update(options) => void`
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
- `QRCodeStyling.applyExtension(extension) => void`
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
- ```JS
225
+ ```js
205
226
  const extension = (svg, options) => {
206
- const { width, height } = options;
207
- const size = Math.min(width, height);
208
- const border = document.createElementNS("http://www.w3.org/2000/svg", "rect");
209
- const borderAttributes = {
210
- "fill": "none",
211
- "x": (width - size + 40) / 2,
212
- "y": (height - size + 40) / 2,
213
- "width": size - 40,
214
- "height": size - 40,
215
- "stroke": 'black',
216
- "stroke-width": 40,
217
- "rx": 100,
218
- };
219
- Object.keys(borderAttributes).forEach(attribute => {
220
- border.setAttribute(attribute, borderAttributes[attribute]);
221
- });
222
- svg.appendChild(border);
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
- `QRCodeStyling.deleteExtension() => void`
247
+ ```js
248
+ QRCodeStyling.deleteExtension() => void
249
+ ```
227
250
 
228
251
  ### License
229
252
 
230
- [MIT License](https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/LICENSE). Copyright (c) 2021 Denys Kozak
253
+ [MIT License](https://github.com/Liquid-JS/qr-code-styling/blob/master/LICENSE)