feat: 二维码生成

5 months ago · 046b45d4fa
parent d135b3f8f7
commit 046b45d4fa
2 changed files with 109 additions and 0 deletions
--- a/demoHtml/qrcode/index.html
+++ b/demoHtml/qrcode/index.html
@ -0,0 +1,102 @@
 <!doctype html>
 <html>
    <head>
        <title>二维码生成器</title>
        <script src="./qrcode.min.js"></script>
        <style>
            body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                background-color: #f4f4f4;
                padding: 40px;
                text-align: center;
            }
            h2 {
                color: #333;
            }
            .container {
                background-color: #fff;
                padding: 30px;
                border-radius: 10px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                max-width: 1000px;
                margin: 0 auto;
            }
            #inputContent {
                width: 100%;
                height: 100px;
                padding: 10px;
                font-size: 16px;
                border: 1px solid #ccc;
                border-radius: 5px;
                resize: none;
                margin-bottom: 20px;
            }
            button {
                padding: 12px 24px;
                font-size: 16px;
                background-color: #007bff;
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
            }
            button:hover {
                background-color: #0056b3;
            }
            #qrcode {
                border: 1px solid #ccc;
                margin-top: 20px;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
            .note {
                margin-top: 15px;
                font-size: 14px;
                color: #666;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h2>请输入内容生成二维码：</h2>
            <textarea
                id="inputContent"
                placeholder="输入文本或URL，支持多行输入"
            ></textarea>
            <button onclick="generateQRCode()">生成二维码</button>
            <canvas
                id="qrcode"
                width="200"
                height="200"
            ></canvas>
            <div class="note">扫描二维码</div>
        </div>
        <script>
            function generateQRCode() {
                let content = document.getElementById('inputContent').value;
                let canvas = document.getElementById('qrcode');
                // 清空 canvas
                canvas.width = canvas.width;
                QRCode.toCanvas(canvas, content, function (error) {
                    if (error) {
                        console.error('二维码生成失败:', error);
                        alert('二维码生成失败，请检查输入内容是否合法。');
                    } else {
                        console.log('二维码生成成功！');
                    }
                });
            }
        </script>
    </body>
 </html>
--- a/demoHtml/qrcode/qrcode.min.js
+++ b/demoHtml/qrcode/qrcode.min.js