JavaScript：二维码生成与解析

生成二维码

生成二维码使用qrcode库

1. 安装

npm install qrcode -S
1

2. 引入

import qrcode from 'qrcode'
1

3. 调用方法生成二维码

qrcode.toString('hello world', (err,res) => {
	if(err) throw err;
	console.log(res);
});
1
2
3
4

效果如下：
在浏览器中打印会返回svg图片

二维码的展示

二维码通常是以图片展示，便于保存，能够用图片显示一种是通过url，一种是通过base64展示，还可以通过canvas绘制显示。

由于浏览器不能生成文件因此，不能通过生成url进行展示，因此通过base64进行展示。
使用qrcode生成base64数据，需要使用toDataURL()方法。

qrcode.toDataURL('hello world', (err, res) => {
	if(err) throw err;
	console.log(res);
	 let img = new Image();
	 img.onload = function (){
	 	document.body.appendChild(img);
	 }
});
1
2
3
4
5
6
7
8

使用 qrcode 通过canvas绘制显示，需要使用 qrcode.toCanvas() 方法

qrcode.toCanvas('hello wrold', (err,res) => {
	if(err) throw err;
 	 // 返回的结果是canvas元素
  	document.body.appendChild(res);
});
1
2
3
4
5

效果如下：

![在这里插入图片描述](https://img-blog.csdnimg.cn/03bba6500f1f439bb018f8b58aa5bce2.png#pic_center
qrcode库在浏览器端和服务端能使用的API数量是不一样的，以上几个API可以在浏览器端使用，
下面几个只能在服务器端使用，在服务器端除了下面几个特有的API之外还包括上面几个API。

在服务器端可以把二维码输出为一个文件
qrcode.toFile()
参数：

• path：输出文件的路径
• text：要转换成二维码的文本
• options：可选，是配置项
• callback：回调函数，回调函数的第一个参数是错误对象，第二个参数是返回的结果

qrcode.toFile('./output/qrcode.png','hello world', (err,res) => {
	if(err) throw err;
	console.log(res,err);
});
1
2
3
4

qrcode.toFile()调用完毕后会在指定路径生成一个文件，该文件就是生成的二维码图片。

qrcode.toBuffer()
参数：

• text：要转换为二维码的文本
• options：选项对象
• callback：回调函数，回调函数的第一个参数是错误对象，第二个参数是返回的结果

qrcode.toBuffer('hello world', (err, res) => {
  console.log(res, err);
});
1
2
3

qrcode.toBuffer()返回的是一个Buffer数据

二维码的解析

有的时候需要将二维码图片解析成文本数据，例如，手机扫描二维码显示数据，这时就需要把获得的二维码图片解析成能够显示的文本数据。

解析二维码使用qrcode-parser库

1. 安装

npm install qrcode-parser -S
1

2. 引入

import qrcodeParser from 'qrcode-parser'
1

3. 解析

// 生成一个二维码
qrcode.toDataURL('hello world', (err, res) => {
  //解析二维码
  qrcodeParser(res).then(res => {
    console.log(res);
   }).catch(err => {
    console.log(err);
  });
});
1
2
3
4
5
6
7
8
9

效果如下：

qrcodeParser(input)：

• input：可以是blob形式的url，可以是base64格式，可以是一个通过file类型的input选中的file

实例：通过上传文件解析二维码

let fileInput = document.getElementById('qrCodeInput');
fileInput.onchange = function(e){
  let file = e.target.files[0];
  qrcodeParser(file).then(res => {
    console.log(res);
  });
}
1
2
3
4
5
6
7