jquery生成二维码

使用 jQuery 生成二维码的方法

方法一：使用 jQuery-qrcode 插件

1. 引入 jQuery 和 jQuery-qrcode 在 HTML 文件中引入 jQuery 和 jQuery-qrcode 插件的 CDN 链接：

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-qrcode@1.0.3/jquery.qrcode.min.js"></script>

2. 创建二维码容器 在 HTML 中创建一个用于显示二维码的容器：

   <div id="qrcode"></div>

3. 生成二维码 使用 jQuery-qrcode 插件生成二维码：

   $(document).ready(function() {
       $('#qrcode').qrcode({
           text: "https://example.com", // 替换为需要生成二维码的内容
           width: 128,
           height: 128
       });
   });

方法二：使用 QRCode.js 结合 jQuery

1. 引入 jQuery 和 QRCode.js 在 HTML 文件中引入 jQuery 和 QRCode.js 的 CDN 链接：

   

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>

2. 创建二维码容器 在 HTML 中创建一个用于显示二维码的容器：

   <div id="qrcode"></div>

3. 生成二维码 使用 QRCode.js 生成二维码：

   

   $(document).ready(function() {
       new QRCode(document.getElementById("qrcode"), {
           text: "https://example.com", // 替换为需要生成二维码的内容
           width: 128,
           height: 128
       });
   });

方法三：使用 Google Charts API

1. 引入 jQuery 在 HTML 文件中引入 jQuery 的 CDN 链接：

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 创建二维码容器 在 HTML 中创建一个用于显示二维码的容器：

   <img id="qrcode" />

3. 生成二维码 使用 Google Charts API 生成二维码：

   $(document).ready(function() {
       var text = "https://example.com"; // 替换为需要生成二维码的内容
       var url = "https://chart.googleapis.com/chart?cht=qr&chs=128x128&chl=" + encodeURIComponent(text);
       $('#qrcode').attr('src', url);
   });

注意事项

• 确保网络连接正常，以便加载外部库或 API。
• 如果需要生成复杂的二维码（如带 Logo 的二维码），建议使用专门的二维码生成库或服务。
• 对于本地开发或离线环境，可以下载相关库的本地版本并引入。