QRCode.js是一个用于生成二维码的JavaScript库。主要是通过获取DOM的标签
再通过HTML5Canvas绘制而成,不依赖任何库
基本用法
- 在html中定义
<div id="qrcode"></div>
- 在js中使用
new QRCode(document.getElementById("qrcode"), "http://www.runoob.com"); // 设置要生成二维码的链接
可选参数
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.w3cschool.cc"); // 生成另外一个二维码
在vue中使用
1.安装
在vue中安装qrcodejs2包
npm install qrcodejs2 --save
2.引入qrcodejs2包
import QRCode from 'qrcodejs2'
//如果要全局引入qrcodejs2包,可以在main中进行定义
import QRCode from 'qrcodejs2';
Vue.prototype.$QRCode = QRCode ;
3.使用QRCode
在需要生成二维码的div
<div id="qrcode" ref="qrcode"></div>
生成二维码
qrCode(code) {
this.$refs.qrcode.innerHTML = ""
let qrcode = new QRCode('qrcode', {
width: 132, //图像宽度
height: 132, //图像高度
text: code, // 二维码地址
colorDark: "#000", //前景色
colorLight: "#fff", //背景色
})
},