TextTransferWeb/index.html at main · Zzz2333/TextTransferWeb · 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
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>二维码文本传输</title>

  <!-- 基本 SEO -->
  <meta name="description" content="在线文字转二维码工具，支持多语言，手机原相机扫码即可复制文本。免安装、免后台，零门槛使用。" />
  <meta name="keywords" content="二维码,文字转二维码,文本传输,便捷,简单,安全,QR Code,在线二维码,多语言,复制文本" />
  <meta name="author" content="Zzz233-白日梦想家" />
  <meta name="robots" content="index,follow" />

  <!-- Canonical -->
  <link rel="canonical" href="https://zzz2333.github.io/TextTransferWeb/" />

  <!-- Sitemap -->
  <link rel="sitemap" type="application/xml" title="Sitemap" href="/TextTransferWeb/sitemap.xml" />

  <!-- Open Graph (社交平台预览) -->
  <meta property="og:title" content="二维码文本传输" />
  <meta property="og:description" content="在线文字转二维码工具，支持多语言，手机原相机扫码即可复制文本。" />
  <meta property="og:url" content="https://zzz2333.github.io/TextTransferWeb/" />
  <meta property="og:type" content="website" />
  <!-- 如果有预生成的缩略图，可放到项目根目录下 -->
  <meta property="og:image" content="https://zzz2333.github.io/TextTransferWeb/og-image.png" />

  <link rel="stylesheet" href="style.css" />

</head>
<body>

  <div class="container">
    <!-- 主功能区域 -->
    <div class="left-panel">
      <h1>文字生成二维码</h1>
      <textarea id="text" rows="8" placeholder="请输入文字，如：你好，世界！"></textarea>

      <button onclick="generate()">生成二维码</button>

      <div id="qrcode-container">
        <canvas id="qrcode-canvas"></canvas>
        <div id="qrcode-hint">请输入文字并点击生成按钮</div>
      </div>
    </div>

    <!-- 辅助提示区域 -->
    <div class="right-panel">
      <h1>二维码文本传输提示</h1>
      <p>①请输入要传输的文本，点击按钮生成二维码</p>
      <p>②请使用手机原相机扫描二维码，然后点击“拷贝”按钮即可复制文本。</p>
      <img src="扫码指导.jpg" alt="扫码教程" />
    </div>
  </div>

  <!-- 引入 QRCode.js 库 -->
  <script src="qrcode.min.js"></script>
  <script>
    function generate() {
      var text = document.getElementById('text').value.trim();
      var canvas = document.getElementById('qrcode-canvas');
      var hint = document.getElementById('qrcode-hint');

      if (!text) {
        alert("请输入要生成二维码的文字！");
        return;
      }

      QRCode.toCanvas(canvas, text, { errorCorrectionLevel: 'H', width: 400 }, function (err) {
        if (err) {
          console.error(err);
          alert("生成二维码失败");
          return;
        }
        canvas.style.display = 'block';
        hint.style.display = 'none';
      });
    }
  </script>
</body>
</html>