qrcode.js基于js生成二维码

本文档收集了几款优秀的js生成二维码插件无需jquery库，有支持ie、chrome、火狐、移动端浏览器在客户端直接创建二维码而无需通过服务器端生成二维码图片，这样可以提升用户体验节省网络带宽。

官方网站

文件下载

UMD浏览器直接引用JS方式

使用方法

//使用方法也非常简单，一行代码搞定
var obj=document.getElementById("qrcode");//显示二维码的元素对象
new QRCode(, " //要生成二维码的内容

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>qrcode.js生成二维码例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> 
    <script src="https://www.itxst.com/package/qrcodejs/qrcode.min.js"></script>  
</head>
<body style="padding:10px;">
    <div id="qrcode"></div>
    <script type="text/javascript">
    new QRCode(document.getElementById("qrcode"), "http://www.itxst.com");
    </script>
</body>
</html>

参数列表

var qrcode = new QRCode(document.getElementById("qrcode"), {
	text: "http://www.itxst.com" //二维码内容 
	width: 128, //二维宽度
	height: 128, //二维码高度
	colorDark : "#000000", //背景色
	colorLight : "#ffffff", //前景色
	correctLevel : QRCode.CorrectLevel.H //纠错级别级别支持 L M Q H
});
//重新生成一个二维码
qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.antgit.com"); // 重新生成二维码

纠错级别

这个值并不是设置越高越好，比如你的二维码是在网页中显示不会变形L就好这样二维码密度小，如果你的二维码是需要打印到包材实物上而包材可以会扭曲则需要把纠错级别设置稍微高点。

纠错级别	说明
L	最大 7% 的错误能够被纠正识别
M	最大 15% 的错误能够被纠正识别
Q	最大 25% 的错误能够被纠正识别
H	最大 30% 的错误能够被纠正识别

例子

qrcode容量

二维码的容量并不是无限大的，每个版本的容量各有不同，使用时尽量生成少的内容，如果内容实在是比较多无法减少可以通过把网址生成二维码，用户少二维码后直接会跳转到这个网页的网址。

在线试一试