QRcode(使用JavaScript生成二维码)

1,974 阅读1分钟

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", //背景色
  })
},