QRCode/index.html at master · MuGuiLin/QRCode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="MuGuiLin, 沐枫, https://github.com/MuGuiLin" />
    <meta name="keywords" content="MuGuiLin, 沐枫, 前端, Web前端, Web全栈, 人工智能, 前端工程师, AI应用开发、网站开发, Ai Agent搭建, H5开发, Ai智能体开发、 APP开发, 小程序, Python, LangChain" />
    <title>二维码：生成、扫描、识别</title>
    <link rel="stylesheet" href="./css/base.css" />
    <script src="https://hm.baidu.com/hm.js?29d14c9fb6158fcbec79d1a0d1425404"></script>
</head>

<body>
    <div class="page-shell">
        <header class="hero">
            <div class="hero__content">
                <p class="eyebrow">纯Web 前端 JS 工具</p>
                <h1>二维码生成与识别</h1>
                <p class="hero__desc">输入网址、文本或联系方式，即可生成清晰二维码；也可以扫描或上传图片识别内容。</p>
            </div>
        </header>

        <menu class="menu" id="menu" aria-label="QR code mode switch">
            <nav class="active">生成二维码</nav>
            <nav>识别二维码</nav>
        </menu>

        <main class="main">
            <aside class="create panel">
                <div class="panel__header">
                    <p class="panel__label">Create</p>
                    <h2>生成二维码</h2>
                    <p>将内容填入下方，点击按钮后即时生成，适合网址、短文本、联系方式等。</p>
                </div>

                <div class="form-row">
                    <input type="text" id="code" value="http://www.muguilin.com" placeholder="请输入要生成二维码的内容!" />
                    <input type="button" value="立即生成" id="create" />
                    <input type="button" value="点击下载" id="download" />
                </div>

                <div class="qrcode-wrap">
                    <div class="qrcode" id="qrcode"></div>
                </div>
            </aside>

            <aside class="reader panel">
                <div class="panel__header">
                    <p class="panel__label">Reader</p>
                    <h2>识别二维码</h2>
                    <p>可以打开摄像头直接扫描，也可以从本地选择二维码图片。</p>
                </div>

                <div class="actions">
                    <button class="sweep" onclick="sweep()">扫一扫</button>
                    <button class="sweep sweep--file">
                        <input type="file" id="file" onchange="upload()" accept="image/*" />从相册选择
                    </button>
                </div>
                <p class="reader-status" id="readerStatus" aria-live="polite"></p>

                <div class="reader-grid">
                    <div class="imgurl">
                        <img id="imgurl" src="http://demo.muguilin.com/qrcode/muguilin-qrcode.png"
                            alt="Current QR code image" />
                    </div>
                    <textarea class="result" id="result" cols="32" rows="6" placeholder="二维码识别结果会显示在这里!"></textarea>
                </div>
            </aside>
        </main>
    </div>

    <div class="scan-layer" id="scanLayer" aria-hidden="true">
        <canvas class="canvas" id="canvas"></canvas>
        <div class="scan-panel">
            <div class="scan-tools">
                <button type="button" class="scan-tool" id="torchToggle">开启闪光灯</button>
                <button type="button" class="scan-tool" id="cameraSwitch">切换摄像头</button>
            </div>
            <div class="scan-frame">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <i></i>
            </div>
            <p id="scanStatus">请将二维码放入取景框内</p>
            <button type="button" class="scan-close" id="scanClose">退出扫描</button>
        </div>
    </div>

    <!-- 二维码生成 -->
    <script src="./js/qrcode.min.js"></script>
    <script>
        // 1. 获取DOM元素
        const textInput = document.querySelector('#code');
        const generateBtn = document.querySelector('#create');
        const downloadBtn = document.querySelector('#download');

        // 2. 提取配置，便于维护
        const qrConfig = {
            width: 300,
            height: 300,
            data: textInput.value || "http://www.muguilin.com",
            qrOptions: {
                typeNumber: "0",
                mode: "Byte",
                errorCorrectionLevel: "Q"
            },
            dotsOptions: {
                type: "extra-rounded",
                color: "#6a1a4c",
                roundSize: true,
                gradient: {
                    type: "linear",
                    rotation: 0,
                    colorStops: [
                        { offset: 0, color: "#fa01ea" },
                        { offset: 1, color: "#0161fe" }
                    ]
                }
            },
            cornersSquareOptions: {
                type: "extra-rounded",
                color: "#1858fc"
            },
            cornersDotOptions: {
                type: "",
                color: "#e213ec"
            },
            // 建议添加背景选项，避免透明背景在某些查看器中显示异常
            backgroundOptions: {
                color: "#ffffff",
            }
        };

        // 3. 初始化实例
        const qrCode = new QRCodeStyling(qrConfig);

        // 只 append 一次
        qrCode.append(document.getElementById("qrcode"));

        // 4. 优化后的生成函数
        async function create() {
            const content = textInput.value.trim();

            if (!content) {
                alert("请输入要生成二维码的内容!");
                return;
            }

            // UI 反馈：禁用按钮，防止重复点击
            const originalText = generateBtn.value;
            generateBtn.disabled = true;
            generateBtn.value = "生成中...";

            try {
                // 更新二维码数据
                await qrCode.update({
                    data: content
                });

            } catch (error) {
                console.error("二维码生成失败:", error);
                alert("生成失败，请重试");
            } finally {
                // 恢复按钮状态
                generateBtn.disabled = false;
                generateBtn.value = originalText;
            }
        }

        // 5. 优化后的下载函数
        async function download() {
            const content = textInput.value.trim();
            if (!content) {
                alert("暂无内容可下载");
                return;
            }

            // 获取预览图 URL (可选，如果你需要 img 标签显示),  注意：getRawData 返回的是 Blob，需要转换为 URL
            // const blob = await qrCode.getRawData('png');
            // if (blob) {
            //     URL.createObjectURL(blob);
            // }

            console.log("二维码生成成功");
            // 使用更友好的文件名
            qrCode.download({
                name: `qrcode_${Date.now()}`,
                extension: "png"
            });
        }

        // 监听回车键生成
        textInput.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                create();
            }
        });
        generateBtn.addEventListener('click', create);
        downloadBtn.addEventListener('click', download);
    </script>

    <!-- 二维码识别 -->
    <script src="./js/jimp.min.js"></script>
    <script src="./js/jsqr.min.js"></script>
    <script src="./js/base.js"></script>
    <script>
        const result = document.querySelector('#result');
        const readerStatus = document.querySelector('#readerStatus');
        const scanStatus = document.querySelector('#scanStatus');
        const QrCode = new QrCodeRecognition({
            sweepId: '#canvas',
            uploadId: '#file',
            layerId: '#scanLayer',
            closeId: '#scanClose',
            torchId: '#torchToggle',
            switchId: '#cameraSwitch',
            previewId: '#imgurl',
            status: function (text) {
                readerStatus.textContent = text;
                scanStatus.textContent = text || '请将二维码放入取景框内';
            },
            error: function (err) {
                result.value = err;
            },
            seuccess: function (res) {
                result.value = res.data;
            }
        });

        function sweep() {
            result.value = '';
            QrCode.sweep();
        };

        function upload() {
            result.value = '';
            QrCode.upload();
        };

        window.addEventListener('beforeunload', function () {
            QrCode.destroy();
        });
    </script>

    <!-- Demo页面切换交互 -->
    <script>
        const menu = [...document.querySelectorAll('nav')];
        const aside = [...document.querySelectorAll('aside')];
        menu.forEach((nav, n) => {
            nav.onclick = () => {
                aside.forEach((ele, a) => {
                    ele.style.display = 'none';
                    menu[a].classList.remove('active');
                });
                menu[n].classList.add('active');
                aside[n].style.display = 'block';
            }
        });
    </script>
</body>

</html>