@wirunrom/hqr-generate 0.2.2 → 0.2.22
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 +64 -27
- package/index.bundler.js +15 -2
- package/index.web.js +15 -2
- package/package.json +23 -16
- package/pkg/bundler/README.md +64 -27
- package/pkg/bundler/hqr_generate_bg.wasm +0 -0
- package/pkg/bundler/package.json +2 -2
- package/pkg/web/README.md +64 -27
- package/pkg/web/hqr_generate_bg.wasm +0 -0
- package/pkg/web/package.json +2 -2
- package/react/index.d.ts +1 -1
- package/bundler/react.d.ts +0 -23
- package/bundler/react.js +0 -73
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @wirunrom/hqr-generate
|
|
2
2
|
|
|
3
|
-
A **stable black-and-white QR Code generator** that returns
|
|
3
|
+
A **stable black-and-white QR Code generator** that returns **PNG Data URLs or PNG bytes**, powered by **Rust + WebAssembly (WASM)**.
|
|
4
4
|
|
|
5
5
|
This library is designed with a **scan-reliability-first** mindset and a **frontend-first API**, making it easy to use in modern web applications without additional configuration.
|
|
6
6
|
|
|
@@ -12,11 +12,11 @@ This library is designed with a **scan-reliability-first** mindset and a **front
|
|
|
12
12
|
- Optimized for both **old and new mobile devices**
|
|
13
13
|
- Deterministic and consistent QR output
|
|
14
14
|
- Lightweight and fast (**Rust + WASM**)
|
|
15
|
-
- Supports
|
|
15
|
+
- Supports:
|
|
16
16
|
- **PNG Data URL** (simple usage)
|
|
17
|
-
- **PNG raw bytes** (best performance)
|
|
17
|
+
- **PNG raw bytes** (best performance, no Base64 overhead)
|
|
18
18
|
- Works out of the box with:
|
|
19
|
-
- Plain HTML
|
|
19
|
+
- Plain HTML / JavaScript
|
|
20
20
|
- React
|
|
21
21
|
- Next.js (Pages Router & App Router)
|
|
22
22
|
- Modern bundlers (Vite, Webpack, etc.)
|
|
@@ -29,33 +29,52 @@ This library is designed with a **scan-reliability-first** mindset and a **front
|
|
|
29
29
|
npm install @wirunrom/hqr-generate
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
## Basic Usage (
|
|
32
|
+
## Basic Usage (Bundler / React / Next.js)
|
|
33
33
|
|
|
34
|
-
Generate PNG Data URL
|
|
34
|
+
**Generate PNG Data URL**
|
|
35
|
+
|
|
36
|
+
Simple and widely compatible. Recommended for most use cases.
|
|
35
37
|
|
|
36
38
|
```ts
|
|
37
|
-
import {
|
|
39
|
+
import { qrPngDataUrl } from "@wirunrom/hqr-generate";
|
|
40
|
+
|
|
41
|
+
const src = await qrPngDataUrl("hello world", {
|
|
42
|
+
size: 320,
|
|
43
|
+
margin: 4,
|
|
44
|
+
ecc: "Q",
|
|
45
|
+
});
|
|
38
46
|
|
|
39
|
-
const src = await qr_png_data_url("hello", 320, 4, "Q");
|
|
40
47
|
<img src={src} alt="QR Code" />
|
|
41
48
|
```
|
|
42
49
|
|
|
43
|
-
Generate PNG Bytes
|
|
50
|
+
**Generate PNG Bytes (Best Performance)**
|
|
51
|
+
|
|
44
52
|
Using raw bytes avoids Base64 overhead and is more memory-efficient.
|
|
45
53
|
|
|
46
54
|
```ts
|
|
47
|
-
import {
|
|
55
|
+
import { qrPngBytes } from "@wirunrom/hqr-generate";
|
|
48
56
|
|
|
49
|
-
const bytes = await
|
|
50
|
-
|
|
57
|
+
const bytes = await qrPngBytes("hello world", {
|
|
58
|
+
size: 320,
|
|
59
|
+
margin: 4,
|
|
60
|
+
ecc: "Q",
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
const url = URL.createObjectURL(
|
|
64
|
+
new Blob([bytes], { type: "image/png" })
|
|
65
|
+
);
|
|
51
66
|
|
|
52
67
|
<img src={url} alt="QR Code" />
|
|
68
|
+
|
|
53
69
|
```
|
|
54
70
|
|
|
55
|
-
## React Hook Helper
|
|
71
|
+
## React Hook Helper (/react)
|
|
72
|
+
|
|
73
|
+
For React or Next.js applications, the library provides idiomatic React hooks that automatically update when inputs change.
|
|
56
74
|
|
|
57
75
|
**useQrPngDataUrl**
|
|
58
|
-
|
|
76
|
+
|
|
77
|
+
Generates a PNG Data URL and updates automatically when dependencies change.
|
|
59
78
|
|
|
60
79
|
```ts
|
|
61
80
|
import { useQrPngDataUrl } from "@wirunrom/hqr-generate/react";
|
|
@@ -73,7 +92,9 @@ function QR() {
|
|
|
73
92
|
```
|
|
74
93
|
|
|
75
94
|
**useQrPngBlobUrl**
|
|
76
|
-
|
|
95
|
+
|
|
96
|
+
Generates a Blob URL instead of a Base64 Data URL.
|
|
97
|
+
Recommended for larger QR codes or frequent updates.
|
|
77
98
|
|
|
78
99
|
```ts
|
|
79
100
|
import { useQrPngBlobUrl } from "@wirunrom/hqr-generate/react";
|
|
@@ -90,21 +111,37 @@ function QR() {
|
|
|
90
111
|
}
|
|
91
112
|
```
|
|
92
113
|
|
|
93
|
-
##
|
|
114
|
+
## Plain HTML / No Bundler (/web)
|
|
94
115
|
|
|
95
|
-
|
|
96
|
-
Generate a QR code and return a PNG Data URL.
|
|
116
|
+
Use this entry when working with static HTML, CDN, or environments without a bundler.
|
|
97
117
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
| size | `number` | `320` | Image size in pixels |
|
|
102
|
-
| margin | `number` | `4` | Quiet zone (recommended ≥ 4) |
|
|
103
|
-
| ecc | `"L" \| "M" \| "Q" \| "H"` | `"Q"` | Error correction level |
|
|
118
|
+
```html
|
|
119
|
+
<script type="module">
|
|
120
|
+
import { qr_png_bytes, qr_png_data_url } from "@wirunrom/hqr-generate/web";
|
|
104
121
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
122
|
+
const src = await qr_png_bytes("hello world", {
|
|
123
|
+
size: 320,
|
|
124
|
+
margin: 4,
|
|
125
|
+
ecc: "Q",
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
// or
|
|
129
|
+
|
|
130
|
+
const src = await qr_png_data_url("hello world", {
|
|
131
|
+
size: 320,
|
|
132
|
+
margin: 4,
|
|
133
|
+
ecc: "Q",
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
document.getElementById("qr").src = src;
|
|
137
|
+
</script>
|
|
138
|
+
|
|
139
|
+
<img id="qr" />
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## API Reference
|
|
143
|
+
|
|
144
|
+
Generate a QR code and return a PNG Data URL.
|
|
108
145
|
|
|
109
146
|
| Name | Type | Default | Description |
|
|
110
147
|
| ------ | -------------------------- | ------- | ---------------------------- |
|
package/index.bundler.js
CHANGED
|
@@ -5,6 +5,19 @@ import init, {
|
|
|
5
5
|
|
|
6
6
|
let _initPromise;
|
|
7
7
|
|
|
8
|
+
function eccToU8(ecc) {
|
|
9
|
+
switch (ecc) {
|
|
10
|
+
case "L":
|
|
11
|
+
return 0;
|
|
12
|
+
case "M":
|
|
13
|
+
return 1;
|
|
14
|
+
case "H":
|
|
15
|
+
return 3;
|
|
16
|
+
default:
|
|
17
|
+
return 2;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
8
21
|
async function ensureInit() {
|
|
9
22
|
if (!_initPromise) _initPromise = init();
|
|
10
23
|
await _initPromise;
|
|
@@ -12,10 +25,10 @@ async function ensureInit() {
|
|
|
12
25
|
|
|
13
26
|
export async function qr_png_data_url(text, size = 320, margin = 4, ecc = "Q") {
|
|
14
27
|
await ensureInit();
|
|
15
|
-
return _qr_png_data_url(text, size, margin, ecc);
|
|
28
|
+
return _qr_png_data_url(text, size, margin, eccToU8(ecc));
|
|
16
29
|
}
|
|
17
30
|
|
|
18
31
|
export async function qr_png_bytes(text, size = 320, margin = 4, ecc = "Q") {
|
|
19
32
|
await ensureInit();
|
|
20
|
-
return _qr_png_bytes(text, size, margin, ecc);
|
|
33
|
+
return _qr_png_bytes(text, size, margin, eccToU8(ecc));
|
|
21
34
|
}
|
package/index.web.js
CHANGED
|
@@ -5,6 +5,19 @@ import init, {
|
|
|
5
5
|
|
|
6
6
|
let _initPromise;
|
|
7
7
|
|
|
8
|
+
function eccToU8(ecc) {
|
|
9
|
+
switch (ecc) {
|
|
10
|
+
case "L":
|
|
11
|
+
return 0;
|
|
12
|
+
case "M":
|
|
13
|
+
return 1;
|
|
14
|
+
case "H":
|
|
15
|
+
return 3;
|
|
16
|
+
default:
|
|
17
|
+
return 2;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
8
21
|
/** @returns {Promise<void>} */
|
|
9
22
|
async function ensureInit() {
|
|
10
23
|
if (!_initPromise) _initPromise = init();
|
|
@@ -20,10 +33,10 @@ async function ensureInit() {
|
|
|
20
33
|
*/
|
|
21
34
|
export async function qr_png_data_url(text, size = 320, margin = 4, ecc = "Q") {
|
|
22
35
|
await ensureInit();
|
|
23
|
-
return _qr_png_data_url(text, size, margin, ecc);
|
|
36
|
+
return _qr_png_data_url(text, size, margin, eccToU8(ecc));
|
|
24
37
|
}
|
|
25
38
|
|
|
26
39
|
export async function qr_png_bytes(text, size = 320, margin = 4, ecc = "Q") {
|
|
27
40
|
await ensureInit();
|
|
28
|
-
return _qr_png_bytes(text, size, margin, ecc);
|
|
41
|
+
return _qr_png_bytes(text, size, margin, eccToU8(ecc));
|
|
29
42
|
}
|
package/package.json
CHANGED
|
@@ -1,27 +1,28 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wirunrom/hqr-generate",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.22",
|
|
4
4
|
"description": "Stable black/white QR code generator (PNG data URL) powered by Rust + WASM",
|
|
5
|
+
"license": "MIT",
|
|
5
6
|
"type": "module",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/wirunrom/hqr-generate.git"
|
|
10
|
+
},
|
|
11
|
+
"homepage": "https://github.com/wirunrom/hqr-generate#readme",
|
|
6
12
|
"files": [
|
|
7
13
|
"pkg/**",
|
|
8
14
|
"index.web.js",
|
|
9
15
|
"index.bundler.js",
|
|
10
16
|
"index.d.ts",
|
|
11
17
|
"react/**",
|
|
12
|
-
"bundler/**",
|
|
13
18
|
"README.md",
|
|
14
19
|
"LICENSE"
|
|
15
20
|
],
|
|
16
|
-
"main": "./index.web.js",
|
|
17
|
-
"module": "./index.web.js",
|
|
18
21
|
"types": "./index.d.ts",
|
|
22
|
+
"main": "./index.bundler.js",
|
|
23
|
+
"module": "./index.bundler.js",
|
|
19
24
|
"exports": {
|
|
20
25
|
".": {
|
|
21
|
-
"types": "./index.d.ts",
|
|
22
|
-
"default": "./index.web.js"
|
|
23
|
-
},
|
|
24
|
-
"./bundler": {
|
|
25
26
|
"types": "./index.d.ts",
|
|
26
27
|
"default": "./index.bundler.js"
|
|
27
28
|
},
|
|
@@ -29,14 +30,18 @@
|
|
|
29
30
|
"types": "./react/index.d.ts",
|
|
30
31
|
"default": "./react/index.js"
|
|
31
32
|
},
|
|
32
|
-
"./
|
|
33
|
-
"types": "./
|
|
34
|
-
"default": "./
|
|
33
|
+
"./web": {
|
|
34
|
+
"types": "./index.d.ts",
|
|
35
|
+
"default": "./index.web.js"
|
|
35
36
|
}
|
|
36
37
|
},
|
|
37
38
|
"peerDependencies": {
|
|
38
|
-
"react": ">=17"
|
|
39
|
-
|
|
39
|
+
"react": ">=17"
|
|
40
|
+
},
|
|
41
|
+
"peerDependenciesMeta": {
|
|
42
|
+
"react": {
|
|
43
|
+
"optional": true
|
|
44
|
+
}
|
|
40
45
|
},
|
|
41
46
|
"scripts": {
|
|
42
47
|
"clean": "rm -rf pkg",
|
|
@@ -50,8 +55,10 @@
|
|
|
50
55
|
"keywords": [
|
|
51
56
|
"qrcode",
|
|
52
57
|
"qr",
|
|
58
|
+
"rust",
|
|
53
59
|
"wasm",
|
|
54
|
-
"
|
|
55
|
-
|
|
56
|
-
|
|
60
|
+
"react",
|
|
61
|
+
"png",
|
|
62
|
+
"performance"
|
|
63
|
+
]
|
|
57
64
|
}
|
package/pkg/bundler/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @wirunrom/hqr-generate
|
|
2
2
|
|
|
3
|
-
A **stable black-and-white QR Code generator** that returns
|
|
3
|
+
A **stable black-and-white QR Code generator** that returns **PNG Data URLs or PNG bytes**, powered by **Rust + WebAssembly (WASM)**.
|
|
4
4
|
|
|
5
5
|
This library is designed with a **scan-reliability-first** mindset and a **frontend-first API**, making it easy to use in modern web applications without additional configuration.
|
|
6
6
|
|
|
@@ -12,11 +12,11 @@ This library is designed with a **scan-reliability-first** mindset and a **front
|
|
|
12
12
|
- Optimized for both **old and new mobile devices**
|
|
13
13
|
- Deterministic and consistent QR output
|
|
14
14
|
- Lightweight and fast (**Rust + WASM**)
|
|
15
|
-
- Supports
|
|
15
|
+
- Supports:
|
|
16
16
|
- **PNG Data URL** (simple usage)
|
|
17
|
-
- **PNG raw bytes** (best performance)
|
|
17
|
+
- **PNG raw bytes** (best performance, no Base64 overhead)
|
|
18
18
|
- Works out of the box with:
|
|
19
|
-
- Plain HTML
|
|
19
|
+
- Plain HTML / JavaScript
|
|
20
20
|
- React
|
|
21
21
|
- Next.js (Pages Router & App Router)
|
|
22
22
|
- Modern bundlers (Vite, Webpack, etc.)
|
|
@@ -29,33 +29,52 @@ This library is designed with a **scan-reliability-first** mindset and a **front
|
|
|
29
29
|
npm install @wirunrom/hqr-generate
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
## Basic Usage (
|
|
32
|
+
## Basic Usage (Bundler / React / Next.js)
|
|
33
33
|
|
|
34
|
-
Generate PNG Data URL
|
|
34
|
+
**Generate PNG Data URL**
|
|
35
|
+
|
|
36
|
+
Simple and widely compatible. Recommended for most use cases.
|
|
35
37
|
|
|
36
38
|
```ts
|
|
37
|
-
import {
|
|
39
|
+
import { qrPngDataUrl } from "@wirunrom/hqr-generate";
|
|
40
|
+
|
|
41
|
+
const src = await qrPngDataUrl("hello world", {
|
|
42
|
+
size: 320,
|
|
43
|
+
margin: 4,
|
|
44
|
+
ecc: "Q",
|
|
45
|
+
});
|
|
38
46
|
|
|
39
|
-
const src = await qr_png_data_url("hello", 320, 4, "Q");
|
|
40
47
|
<img src={src} alt="QR Code" />
|
|
41
48
|
```
|
|
42
49
|
|
|
43
|
-
Generate PNG Bytes
|
|
50
|
+
**Generate PNG Bytes (Best Performance)**
|
|
51
|
+
|
|
44
52
|
Using raw bytes avoids Base64 overhead and is more memory-efficient.
|
|
45
53
|
|
|
46
54
|
```ts
|
|
47
|
-
import {
|
|
55
|
+
import { qrPngBytes } from "@wirunrom/hqr-generate";
|
|
48
56
|
|
|
49
|
-
const bytes = await
|
|
50
|
-
|
|
57
|
+
const bytes = await qrPngBytes("hello world", {
|
|
58
|
+
size: 320,
|
|
59
|
+
margin: 4,
|
|
60
|
+
ecc: "Q",
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
const url = URL.createObjectURL(
|
|
64
|
+
new Blob([bytes], { type: "image/png" })
|
|
65
|
+
);
|
|
51
66
|
|
|
52
67
|
<img src={url} alt="QR Code" />
|
|
68
|
+
|
|
53
69
|
```
|
|
54
70
|
|
|
55
|
-
## React Hook Helper
|
|
71
|
+
## React Hook Helper (/react)
|
|
72
|
+
|
|
73
|
+
For React or Next.js applications, the library provides idiomatic React hooks that automatically update when inputs change.
|
|
56
74
|
|
|
57
75
|
**useQrPngDataUrl**
|
|
58
|
-
|
|
76
|
+
|
|
77
|
+
Generates a PNG Data URL and updates automatically when dependencies change.
|
|
59
78
|
|
|
60
79
|
```ts
|
|
61
80
|
import { useQrPngDataUrl } from "@wirunrom/hqr-generate/react";
|
|
@@ -73,7 +92,9 @@ function QR() {
|
|
|
73
92
|
```
|
|
74
93
|
|
|
75
94
|
**useQrPngBlobUrl**
|
|
76
|
-
|
|
95
|
+
|
|
96
|
+
Generates a Blob URL instead of a Base64 Data URL.
|
|
97
|
+
Recommended for larger QR codes or frequent updates.
|
|
77
98
|
|
|
78
99
|
```ts
|
|
79
100
|
import { useQrPngBlobUrl } from "@wirunrom/hqr-generate/react";
|
|
@@ -90,21 +111,37 @@ function QR() {
|
|
|
90
111
|
}
|
|
91
112
|
```
|
|
92
113
|
|
|
93
|
-
##
|
|
114
|
+
## Plain HTML / No Bundler (/web)
|
|
94
115
|
|
|
95
|
-
|
|
96
|
-
Generate a QR code and return a PNG Data URL.
|
|
116
|
+
Use this entry when working with static HTML, CDN, or environments without a bundler.
|
|
97
117
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
| size | `number` | `320` | Image size in pixels |
|
|
102
|
-
| margin | `number` | `4` | Quiet zone (recommended ≥ 4) |
|
|
103
|
-
| ecc | `"L" \| "M" \| "Q" \| "H"` | `"Q"` | Error correction level |
|
|
118
|
+
```html
|
|
119
|
+
<script type="module">
|
|
120
|
+
import { qr_png_bytes, qr_png_data_url } from "@wirunrom/hqr-generate/web";
|
|
104
121
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
122
|
+
const src = await qr_png_bytes("hello world", {
|
|
123
|
+
size: 320,
|
|
124
|
+
margin: 4,
|
|
125
|
+
ecc: "Q",
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
// or
|
|
129
|
+
|
|
130
|
+
const src = await qr_png_data_url("hello world", {
|
|
131
|
+
size: 320,
|
|
132
|
+
margin: 4,
|
|
133
|
+
ecc: "Q",
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
document.getElementById("qr").src = src;
|
|
137
|
+
</script>
|
|
138
|
+
|
|
139
|
+
<img id="qr" />
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## API Reference
|
|
143
|
+
|
|
144
|
+
Generate a QR code and return a PNG Data URL.
|
|
108
145
|
|
|
109
146
|
| Name | Type | Default | Description |
|
|
110
147
|
| ------ | -------------------------- | ------- | ---------------------------- |
|
|
Binary file
|
package/pkg/bundler/package.json
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
"name": "hqr-generate",
|
|
3
3
|
"type": "module",
|
|
4
4
|
"description": "Stable black/white QR code generator (PNG data URL) powered by Rust + WASM",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.2.0",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|
|
9
|
-
"url": "https://github.com/
|
|
9
|
+
"url": "https://github.com/wirunrom/hqr-generate"
|
|
10
10
|
},
|
|
11
11
|
"files": [
|
|
12
12
|
"hqr_generate_bg.wasm",
|
package/pkg/web/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @wirunrom/hqr-generate
|
|
2
2
|
|
|
3
|
-
A **stable black-and-white QR Code generator** that returns
|
|
3
|
+
A **stable black-and-white QR Code generator** that returns **PNG Data URLs or PNG bytes**, powered by **Rust + WebAssembly (WASM)**.
|
|
4
4
|
|
|
5
5
|
This library is designed with a **scan-reliability-first** mindset and a **frontend-first API**, making it easy to use in modern web applications without additional configuration.
|
|
6
6
|
|
|
@@ -12,11 +12,11 @@ This library is designed with a **scan-reliability-first** mindset and a **front
|
|
|
12
12
|
- Optimized for both **old and new mobile devices**
|
|
13
13
|
- Deterministic and consistent QR output
|
|
14
14
|
- Lightweight and fast (**Rust + WASM**)
|
|
15
|
-
- Supports
|
|
15
|
+
- Supports:
|
|
16
16
|
- **PNG Data URL** (simple usage)
|
|
17
|
-
- **PNG raw bytes** (best performance)
|
|
17
|
+
- **PNG raw bytes** (best performance, no Base64 overhead)
|
|
18
18
|
- Works out of the box with:
|
|
19
|
-
- Plain HTML
|
|
19
|
+
- Plain HTML / JavaScript
|
|
20
20
|
- React
|
|
21
21
|
- Next.js (Pages Router & App Router)
|
|
22
22
|
- Modern bundlers (Vite, Webpack, etc.)
|
|
@@ -29,33 +29,52 @@ This library is designed with a **scan-reliability-first** mindset and a **front
|
|
|
29
29
|
npm install @wirunrom/hqr-generate
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
## Basic Usage (
|
|
32
|
+
## Basic Usage (Bundler / React / Next.js)
|
|
33
33
|
|
|
34
|
-
Generate PNG Data URL
|
|
34
|
+
**Generate PNG Data URL**
|
|
35
|
+
|
|
36
|
+
Simple and widely compatible. Recommended for most use cases.
|
|
35
37
|
|
|
36
38
|
```ts
|
|
37
|
-
import {
|
|
39
|
+
import { qrPngDataUrl } from "@wirunrom/hqr-generate";
|
|
40
|
+
|
|
41
|
+
const src = await qrPngDataUrl("hello world", {
|
|
42
|
+
size: 320,
|
|
43
|
+
margin: 4,
|
|
44
|
+
ecc: "Q",
|
|
45
|
+
});
|
|
38
46
|
|
|
39
|
-
const src = await qr_png_data_url("hello", 320, 4, "Q");
|
|
40
47
|
<img src={src} alt="QR Code" />
|
|
41
48
|
```
|
|
42
49
|
|
|
43
|
-
Generate PNG Bytes
|
|
50
|
+
**Generate PNG Bytes (Best Performance)**
|
|
51
|
+
|
|
44
52
|
Using raw bytes avoids Base64 overhead and is more memory-efficient.
|
|
45
53
|
|
|
46
54
|
```ts
|
|
47
|
-
import {
|
|
55
|
+
import { qrPngBytes } from "@wirunrom/hqr-generate";
|
|
48
56
|
|
|
49
|
-
const bytes = await
|
|
50
|
-
|
|
57
|
+
const bytes = await qrPngBytes("hello world", {
|
|
58
|
+
size: 320,
|
|
59
|
+
margin: 4,
|
|
60
|
+
ecc: "Q",
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
const url = URL.createObjectURL(
|
|
64
|
+
new Blob([bytes], { type: "image/png" })
|
|
65
|
+
);
|
|
51
66
|
|
|
52
67
|
<img src={url} alt="QR Code" />
|
|
68
|
+
|
|
53
69
|
```
|
|
54
70
|
|
|
55
|
-
## React Hook Helper
|
|
71
|
+
## React Hook Helper (/react)
|
|
72
|
+
|
|
73
|
+
For React or Next.js applications, the library provides idiomatic React hooks that automatically update when inputs change.
|
|
56
74
|
|
|
57
75
|
**useQrPngDataUrl**
|
|
58
|
-
|
|
76
|
+
|
|
77
|
+
Generates a PNG Data URL and updates automatically when dependencies change.
|
|
59
78
|
|
|
60
79
|
```ts
|
|
61
80
|
import { useQrPngDataUrl } from "@wirunrom/hqr-generate/react";
|
|
@@ -73,7 +92,9 @@ function QR() {
|
|
|
73
92
|
```
|
|
74
93
|
|
|
75
94
|
**useQrPngBlobUrl**
|
|
76
|
-
|
|
95
|
+
|
|
96
|
+
Generates a Blob URL instead of a Base64 Data URL.
|
|
97
|
+
Recommended for larger QR codes or frequent updates.
|
|
77
98
|
|
|
78
99
|
```ts
|
|
79
100
|
import { useQrPngBlobUrl } from "@wirunrom/hqr-generate/react";
|
|
@@ -90,21 +111,37 @@ function QR() {
|
|
|
90
111
|
}
|
|
91
112
|
```
|
|
92
113
|
|
|
93
|
-
##
|
|
114
|
+
## Plain HTML / No Bundler (/web)
|
|
94
115
|
|
|
95
|
-
|
|
96
|
-
Generate a QR code and return a PNG Data URL.
|
|
116
|
+
Use this entry when working with static HTML, CDN, or environments without a bundler.
|
|
97
117
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
| size | `number` | `320` | Image size in pixels |
|
|
102
|
-
| margin | `number` | `4` | Quiet zone (recommended ≥ 4) |
|
|
103
|
-
| ecc | `"L" \| "M" \| "Q" \| "H"` | `"Q"` | Error correction level |
|
|
118
|
+
```html
|
|
119
|
+
<script type="module">
|
|
120
|
+
import { qr_png_bytes, qr_png_data_url } from "@wirunrom/hqr-generate/web";
|
|
104
121
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
122
|
+
const src = await qr_png_bytes("hello world", {
|
|
123
|
+
size: 320,
|
|
124
|
+
margin: 4,
|
|
125
|
+
ecc: "Q",
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
// or
|
|
129
|
+
|
|
130
|
+
const src = await qr_png_data_url("hello world", {
|
|
131
|
+
size: 320,
|
|
132
|
+
margin: 4,
|
|
133
|
+
ecc: "Q",
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
document.getElementById("qr").src = src;
|
|
137
|
+
</script>
|
|
138
|
+
|
|
139
|
+
<img id="qr" />
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## API Reference
|
|
143
|
+
|
|
144
|
+
Generate a QR code and return a PNG Data URL.
|
|
108
145
|
|
|
109
146
|
| Name | Type | Default | Description |
|
|
110
147
|
| ------ | -------------------------- | ------- | ---------------------------- |
|
|
Binary file
|
package/pkg/web/package.json
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
"name": "hqr-generate",
|
|
3
3
|
"type": "module",
|
|
4
4
|
"description": "Stable black/white QR code generator (PNG data URL) powered by Rust + WASM",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.2.0",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|
|
9
|
-
"url": "https://github.com/
|
|
9
|
+
"url": "https://github.com/wirunrom/hqr-generate"
|
|
10
10
|
},
|
|
11
11
|
"files": [
|
|
12
12
|
"hqr_generate_bg.wasm",
|
package/react/index.d.ts
CHANGED
package/bundler/react.d.ts
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
export type QrEcc = "L" | "M" | "Q" | "H";
|
|
2
|
-
|
|
3
|
-
export interface UseQrPngOptions {
|
|
4
|
-
size?: number;
|
|
5
|
-
margin?: number;
|
|
6
|
-
ecc?: QrEcc;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* React hook that returns PNG Data URL string (base64).
|
|
11
|
-
*/
|
|
12
|
-
export declare function useQrPngDataUrl(
|
|
13
|
-
text: string,
|
|
14
|
-
opts?: UseQrPngOptions
|
|
15
|
-
): string;
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* React hook that returns Blob URL string.
|
|
19
|
-
*/
|
|
20
|
-
export declare function useQrPngBlobUrl(
|
|
21
|
-
text: string,
|
|
22
|
-
opts?: UseQrPngOptions
|
|
23
|
-
): string;
|
package/bundler/react.js
DELETED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { useEffect, useState } from "react";
|
|
2
|
-
import { qr_png_data_url, qr_png_bytes } from "../index.bundler.js";
|
|
3
|
-
|
|
4
|
-
export function useQrPngDataUrl(text, opts) {
|
|
5
|
-
const size = opts?.size ?? 320;
|
|
6
|
-
const margin = opts?.margin ?? 4;
|
|
7
|
-
const ecc = opts?.ecc ?? "Q";
|
|
8
|
-
|
|
9
|
-
const [src, setSrc] = useState("");
|
|
10
|
-
|
|
11
|
-
useEffect(() => {
|
|
12
|
-
let alive = true;
|
|
13
|
-
|
|
14
|
-
if (!text) {
|
|
15
|
-
setSrc("");
|
|
16
|
-
return () => {
|
|
17
|
-
alive = false;
|
|
18
|
-
};
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
qr_png_data_url(text, size, margin, ecc)
|
|
22
|
-
.then((res) => alive && setSrc(res))
|
|
23
|
-
.catch(() => alive && setSrc(""));
|
|
24
|
-
|
|
25
|
-
return () => {
|
|
26
|
-
alive = false;
|
|
27
|
-
};
|
|
28
|
-
}, [text, size, margin, ecc]);
|
|
29
|
-
|
|
30
|
-
return src;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* Faster than base64 data url: uses Blob URL + revokes on cleanup
|
|
35
|
-
*/
|
|
36
|
-
export function useQrPngBlobUrl(text, opts) {
|
|
37
|
-
const size = opts?.size ?? 320;
|
|
38
|
-
const margin = opts?.margin ?? 4;
|
|
39
|
-
const ecc = opts?.ecc ?? "Q";
|
|
40
|
-
|
|
41
|
-
const [src, setSrc] = useState("");
|
|
42
|
-
|
|
43
|
-
useEffect(() => {
|
|
44
|
-
let alive = true;
|
|
45
|
-
let objectUrl = "";
|
|
46
|
-
|
|
47
|
-
if (!text) {
|
|
48
|
-
setSrc("");
|
|
49
|
-
return () => {
|
|
50
|
-
alive = false;
|
|
51
|
-
if (objectUrl) URL.revokeObjectURL(objectUrl);
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
qr_png_bytes(text, size, margin, ecc)
|
|
56
|
-
.then((bytes) => {
|
|
57
|
-
if (!alive) return;
|
|
58
|
-
if (objectUrl) URL.revokeObjectURL(objectUrl);
|
|
59
|
-
objectUrl = URL.createObjectURL(
|
|
60
|
-
new Blob([bytes], { type: "image/png" }),
|
|
61
|
-
);
|
|
62
|
-
setSrc(objectUrl);
|
|
63
|
-
})
|
|
64
|
-
.catch(() => alive && setSrc(""));
|
|
65
|
-
|
|
66
|
-
return () => {
|
|
67
|
-
alive = false;
|
|
68
|
-
if (objectUrl) URL.revokeObjectURL(objectUrl);
|
|
69
|
-
};
|
|
70
|
-
}, [text, size, margin, ecc]);
|
|
71
|
-
|
|
72
|
-
return src;
|
|
73
|
-
}
|