js插件:自动生成二维码的javascript库QRCode.js
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把输入框的值生成二维码
<< 上一篇
下一篇 >>