js插件:自动生成二维码的javascript库QRCode.js

Web前端开发 / 6295 次阅读

QRCode.js是一个用于生成二维码的javascript库，通过获取DOM标签再使用HTML5的Canvas绘制而成，不依赖任何库（如jQuery）。QRCode.js支持IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile等浏览器。

使用方法：

1、下载地址：https://github.com/davidshimjs/qrcodejs

2、引用qrcode.js文件： 

<script type="text/javascript" src="qrcode.js"></script>

3、HTML代码： 

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

4、javascript代码： 

<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://www.neirong.org");  // 设置要生成二维码的链接
</script>

5、完成。

参数设置： 

var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "http://www.neirong.org", //网址
    width: 128, //宽
    height: 128, //高
    colorDark : "#000000", //前景色
    colorLight : "#ffffff", //背景色
    correctLevel : QRCode.CorrectLevel.H //纠错等级
});

可以使用的方法： 

qrcode.clear(); // 清除代码
qrcode.makeCode("http://neirong.org"); // 生成另一个二维码

应用示例：

HTML代码： 

<input id="text" type="text" value="http://www.neirong.org" />
<div id="qrcode"></div>

CSS代码： 

#qrcode {
	width:160px;
	height:160px;
}

javascript代码： 

var qrcode = new QRCode("qrcode");
function makeCode () {      
    var elText = document.getElementById("text");
    
    if (!elText.value) {
        alert("Input a text");
        elText.focus();
        return;
    }    
    qrcode.makeCode(elText.value);
}
makeCode();
$("#text").on("blur", function () {
    makeCode();
}).on("keydown", function (e) {
    if (e.keyCode == 13) {
        makeCode();
    }
});

代码解释：通过QRCode.js把输入框的值生成二维码