jquery.qrcode.js 生成矩阵二维码 QRCode - js 笔记

可以参考下这个教程，教你如何使用 jquery.qrcode.js 生成矩阵二维码 QRCode

最后更新于 2025-06-04

本页目录4 节

如果你的网页使用了 jquery 的话，可以参考下这个教程，教你如何使用 jquery.qrcode.js 生成矩阵二维码 QRCode。然而，本教程还未进行验证。

代码来源：详情

将 jquery.qrcode.min.js 和 jquery 添加到您的网页中

1
<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
2
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

然后创建一个 DOM 元素去包含生成 qr 码。

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

然后你在此容器中的添加 qrcode

1
<script>
2
    jQuery(function(){
3
    jQuery('#qrcode').qrcode("https://www.npc.ink");
4
})
5
</script>

就这么简单，您想要的二维码就生成了。

指定二维码的生成方式：

可以在调用函数的同时输入想要的二维码生成方式（table/canvas）。

1
//使用table生成
2
jQuery('#qrcode').qrcode({
3
    render: "table",
4
    text: "https://www.npc.ink"
5
});
6

7
//使用canvas生成
8
jQuery('#qrcode').qrcode({
9
    render: "canvas",
10
    text: "https://www.npc.ink"
11
});

指定生成二维码的大小：

可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。

1
//生成100*100(宽度100，高度100)的二维码
2
jQuery('#qrcode').qrcode({
3
    render: "canvas", //也可以替换为table
4
    width: 100,
5
    height: 100,
6
    text: "https://www.npc.ink"
7
});

指定生成二维码的色彩样式：

可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。

1
//生成前景色为红色背景色为白色的二维码
2
jQuery('#qrcode').qrcode({
3
    render: "canvas", //也可以替换为table
4
    foreground: "#C00",
5
    background: "#FFF",
6
    text: "https://www.npc.ink"
7
});

中文 ULR 生成方法:

1
jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转码

展示当前页二维码

原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。

1
<!--载入js资源-->
2
  <script type="text/javascript" src="https://cdn.getimg.net/npc/2020/file/page/0420/js/jquery.min.js"></script>
3
  <script type="text/javascript" src="https://cdn.getimg.net/npc/2020/file/page/0420/js/qrcode.min.js"></script>
4

5
  <!--复制开始-->
6
  <!--
7
  版本：1.0
8
  整理：Muze
9
  帮助：
10
  -->
11
  <h3>当前页地址：</h3>
12

13
  <div id="value1"></div>
14

15
  <h3>当前页二维码：</h3>
16

17
  <div id="qrcode-n"></div>
18

19
  <script type="text/javascript">
20
    //获取当前页面地址
21
    var test = window.location.href;
22
    //指定ID输出
23
    document.getElementById("value1").innerHTML = test;
24
    //制作二维码
25
    abc = $("#value1").text();
26
    //document.write(abc);
27
    new QRCode(document.getElementById("qrcode-n"), abc);
28
  </script>

如果您不需要使用插件的话，可以看看这个原生方法：

阅读偏好

工具

jquery.qrcode.js 生成矩阵二维码 QRCode - js 笔记

更多：

展示当前页二维码

相关接口

使用方法

Demo

搜索