温馨提示:
本文所述内容具有依赖性,可能因软硬条件不同而与预期有所差异,故请以实际为准,仅供参考。
二维码的使用现在是越来越普遍了,网上有很多现成的库可以直接使用,比如 PHP 的 PHP QR Code,有兴趣当然可以自己写一个,但博主认为实在没有必要花费大量时间精力去重复造轮子,直接使用现成的省时省力,嘿哈~
简介
QRCode.js 是一个用于生成二维码的 JavaScript 库,主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库!
项目地址:GitHub/qrcodejs
兼容性
支持该库的浏览器有:IE6~10、Chrome、Firefox、Safari、Opera、Mobile Safari、Android、Windows Mobile 等。
实例
HTML 代码
<input id="text" type="text" value="http://www.runoob.com" /><br />
<div id="qrcode"></div>
CSS 代码
#qrcode {
width:160px;
height:160px;
margin-top:15px;
}
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();
}
});
类似插件
参数
var qrcode = new QRCode("test", {
text: "http://www.runoob.com",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.vircloud.net"); // 生成另外一个二维码
参考文章:
1、QRCode.js:使用 JavaScript 生成二维码