前端jquery生成二维码

前端jquery生成二维码

1、导入包

包地址下载

git： https://gitee.com/smrzll/qrcode_example.git

所需要的是js里的两个js文件

2、简单使用

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "hello world");
</script>

3、传参用法

<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
		  //内容
		    text: "hello world", 
			//二维码宽度
		    width: 128,
			//二维码高度
		    height: 128,
			//背景色
		    colorDark : "#000000",
			//前景色
		    colorLight : "#ffffff",
			//容量等级 0-3
		    correctLevel : QRCode.CorrectLevel.H
		});
</script>

4、调用函数

qrcode.clear(); // 清除二维码
qrcode.makeCode("https://www.gzpblog.com"); // 创建一个新的二维码

5、其他一些问题

5.1 解决中文的乱码

var str = "这是一个二维码"

function utf16to8(str) {
				var out, i, len, c;
				out = "";
				len = str.length;
				for (i = 0; i < len; i++) {
					c = str.charCodeAt(i);
					if ((c >= 0x0001) && (c <= 0x007F)) {
						out += str.charAt(i);
					} else if (c > 0x07FF) {
						out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
						out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
						out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
					} else {
						out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
						out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
					}
				}
				return out;
			};

//使用函数
new QRCode(document.getElementById("qrcode"), utf16to8(str));

5.2 如何监听二维码被扫描

没有实现过，有一些想法，可以试试，如果大佬们有更好的想法可以讨论一下。

1. 生成二维码，调用接口（接口作用是在数据库生成一条二维码数据，状态默认未扫描），给二维码一个ID

2. 扫描二维码就跳转调用二维码里面内容的接口（接口作用是修改二维码的状态为被扫描）

3. 然后在主页面，生成二维码时，可以每隔1秒（或者更短）调用后台接口（接口作用是获取二维码的状态），持续一分钟，时间超过就是二维码无效之类。

6、例子

简单的生成二维码例子

源码见最上方的git

7、文档链接

QRCode.js生成二维码

8、还有一种实现方式，可以改变渲染方式

见下面的git

例子在demo中

[https://github.com/jeromeetienne/jquery-qrcode](