生成二维码

生成二维码使用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);
});

效果如下：

![在这里插入图片描述](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);
});

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

JavaScript：二维码生成与解析相关推荐

C#的二维码生成和解析
C#的二维码生成和解析最近二维码非常流行,通过Goggles或快拍等二维码识别软件,可以节省不少输入时间.在网上搜了一下,发现还是有一些开源的C#程序生成解析二维码的. 生成:Open Source ...
矩形二维码生成，解析（彩色、多个）
矩形二维码生成,解析(彩色.多个) 说明 java生成普通二维码.带logo二维码.彩色二维码 java解析彩色.多个二维码(一个图片上的多个二维码) 使用到的第三方jar包如下: com.googl ...
java 二维码生成和解析
2019独角兽企业重金招聘Python工程师标准>>> <dependency><groupId>com.google.z ...
canvas 插件_基于canvas的JavaScript 二维码生成工具——QRCanvas
介绍在我们日常的开发中,特别是在现代的社会环境下,二维码的应用可谓是丰富多彩,各种各样让人眼花缭乱的二维码,可见二维码已经渗透进我们生活的方方面面,也可以说目二维码确确实实方便了我们的生活.因为作为 ...
Zxing实现二维码生成和解析,可带logo
在项目中使用zxing生成二维码提供项目支撑(ZXing是一个开源Java类库用于解析多种格式的条形码和二维码),其余SwetakeQRCode.BarCode4j等等工具可去了解. 简单介绍 ...
Android 实现系统打印机打印图片，文本，以及二维码生成与解析
打码机:扫码,生成打印自定义标签一.Android 打印机要支持,网络.WiFi :手机与打印机在同一网络下才行,本文用WiFi连接打开系统打印服务: 设置--更多设置--打印--选择默认打印 ...
二维码生成与解析（使用ThoughtWorks.QRCode）
二维码生成 QRCodeEncoder qrCodeEncoder = new QRCodeEncoder(); qrCodeEncoder.QRCodeEncodeMode = QRCodeEnco ...
java二维码生成与解析代码实现
TwoDimensionCode类:二维码操作核心类 package qrcode;import java.awt.Color; import java.awt.Graphics2D; import ...
[转]java二维码生成与解析代码实现
转载地址:点击打开链接二维码,是一种采用黑白相间的平面几何图形通过相应的编码算法来记录文字.图片.网址等信息的条码图片.如下图二维码的特点: 1. 高密度编码,信息容量大可容纳多达1850个大 ...

JavaScript：二维码生成与解析

生成二维码

二维码的展示

二维码的解析

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

JavaScript：二维码生成与解析相关推荐

最新文章

热门文章