当前位置：首页 > news >正文

JavaScript：二维码生成与解析

news 来源：原创 2024/4/29 13:40:21

生成二维码

生成二维码使用qrcode库

安装

npm install qrcode -S

引入

import qrcode from 'qrcode'

调用方法生成二维码

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

效果如下：
在浏览器中打印会返回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);
	 }
});

在这里插入图片描述

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

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

效果如下：
在这里插入图片描述

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);
});

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

qrcode.toBuffer()
参数：

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

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

qrcode.toBuffer()返回的是一个Buffer数据
在这里插入图片描述

二维码的解析

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

解析二维码使用qrcode-parser库

安装

npm install qrcode-parser -S

引入

import qrcodeParser from 'qrcode-parser'

解析

qrcode.toDataURL('hello world', (err, res) => {
  qrcodeParser(res).then(res => {
    console.log(res);
   }).catch(err => {
    console.log(err);
  });
});

效果如下：
在这里插入图片描述

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

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