QRCode库使用教程

最新推荐文章于 2024-04-15 09:40:40 发布

OriginCoding

最新推荐文章于 2024-04-15 09:40:40 发布

阅读量3.7k

点赞数 1

文章标签： node.js javascript 前端

本文链接：https://blog.csdn.net/qq_47993287/article/details/133621219

版权

QRCode库使用教程

QRCode是一款轻量级的JavaScript库，用于快速地生成二维码，并且提供了导出图像的功能，下面对其进行介绍。

安装

npm install --save qrcode
yarn add qrcode
# 使用命令行功能时的安装命令
npm install -g qrcode

QRCode命令行

使用方法：qrcode [options] <input_string> ，options详细说明参见二维码生成选项，这里只做大致说明

二维码格式选项：

-v，—version：二维码的规格，可选项为从1-40的数字
-e，—error：二维码纠错的级别，从低到高分别为L、M、Q、H，参见后文
-m，—mask：二维码的掩码，可选项为0-7的数字

二维码渲染选项：

-t，—type：输出格式，有png、svg、utf8三种
-w，—width：二维码的宽度（也是高度），单位为px
-s，—scale：二维码的缩放尺度
-q，—qzone：二维码四种的白色边框宽度
-l，—lightcolor：亮色的RGBA Hex颜色值，即普通二维码白色的部分
-d，—darkcolor：暗色的RGBA Hex颜色值，即普通二维码黑色的部分
—small：输出更小的二维码到命令行中，类型为boolean

二维码生成选项：

-o，—output：输出文件的名称
-h，—help：查看帮助
—version：查看版本

示例：

qrcode "some text"  # 将二维码绘制在命令行中
qrcode -o output.png "some text"  # 将二维码绘制为png格式的图片
qrcode -d F00 -o output.png "some text"  # 将二维码输出到图片中，并使用红色作为暗色

使用方法

提供的API列表

浏览器（Browser）端提供的API：

create(text, [options])：text为需要渲染的文本，options类型为QRCodeOptions
toCanvas(canvasElement, text, [options], [cb(error, canvas)])：将二维码渲染至canvas，canvasElement类型为DOMElement，cb为渲染结束的回调函数
toDataURL(text, [options], [cb(error, url)])：将二维码渲染为Data URL
toDataURL(canvasElement, text, [options], [cb(error, url)])：与上面功能相同，但是使用canvas对Data URL进行渲染，options额外的选项有：
- type：可选为image/png、image/jpeg或image/webp
- rendererOpts.quality：范围0-1之间的的数字，数字越大，图像质量越高
toString(text, [options], [cb(error, string)])：将二维码渲染为字符串

服务器端（Node.js）提供的API：

create()、toCanvas(canvas, text, [options])、toDataURL()、toString()：前面方法的Node.js版本，toCanvas的第一个参数为canvas对象
toFile(path, text, [options], [cb(error)])：将二维码渲染为本地图像，其额外具有的参数如下：
- type：可选为png、svg、utf8，默认为png
- rendererOpts.defaultLevel（仅限png）：压缩级别，默认为9
- rendererOpts.defaultStrategy（仅限png）：压缩策略，默认为3
toFileStream(stream, text, [options])：将二维码渲染到FileStream中，只支持png格式

二维码生成选项

QRCodeOptions

version：二维码规格，可选项为从1-40的数字。如果不指定，那么QRCode库将自行计算规格
errorCorrectionLevel：二维码纠错级别，可选项为L、M、Q、H，默认为M。级别越高，二维码对污损的抗性越高
maskPattern：二维码掩码，可选为0-7的数字。如果不指定，QRCode将自行选择合适的掩码
toSJISFunc：帮助将日文转换为Shift JIS编码值。二维码最初是日本人发明的，因此会有对日语文字的支持

RenderersOptions

margin：二维码quiet zone的大小，默认为4。quiet zone就是二维码周围的白色边框，大小是几就代表边框有几个二维码黑点的距离
scale：二维码缩放级别，默认为4。scale为1代表每个黑点占有1个像素
small：类型为boolean：只在命令行下生效，表示生成更小的二维码
width：二维码的宽度。如果宽度太小，不足以容纳二维码，那么这个选项将被忽略
color.dark：二维码中黑点的RGBA Hex颜色值，默认为0x000000FF
color.light：二维码中白点的RGBA Hex颜色值，默认为0xFFFFFFFF

代码示例

渲染为Data URL

var QRCode = require("qrcode");  // ESM: import QRCode from "qrcode"

QRCode.toDataURL("Hello, world!", (err, url) => {
  console.log(url)
});

// 后续可以通过React、Vue等框架将Data URL绑定到<image src>属性上

渲染到canvas

<canvas id="canvas"></canvas>

<script src="/build/qrcode.js"></script>
<script>
  QRCode.toCanvas(document.getElementById("canvas"), "Hello, world!", (error) => {
    if (error) console.error(error)
    console.log('success!');
  })
</script>

渲染到命令行

var QRCode = require("qrcode")

QRCode.toString("Hello, world!", { type: "terminal" }, (err, string) => {
  console.log(string)
})

渲染到图像文件

var QRCode = require("qrcode")

QRCode.toFile("path/to/filename.png", "Hello, world!", (err) => {
  if (err) { throw err }
  console.log("success")
})

将图像渲染为jpg格式

import QRCode from "qrcode"

QRCode.toCanvas("Hello, world!").then((el) => {
  el.toBlob((b) => {
    b!.arrayBuffer().then((buffer) => {
      // 在这里处理buffer，这里使用tauri的API将其写入到文件中
      writeBinaryFile(filepath, buffer).then()
    })
  }, "image/jpeg")
})

常用二维码格式说明

WiFi

扫码连接WiFi的格式为：WIFI:T:${type};S:${ssid};P:${password};H:${hidden};;，参数说明如下：

type：WiFi加密类型，有WPA、WEP、WPA2-WEP和无加密4种类型，没有密码时type为空字符串
ssid、password：WiFi名称和密码
hidden：可选为true或false。当WiFi被隐藏时，无法被手机搜索到，只能通过扫码连接等方式连接

电子邮件

扫码发送电子邮件的格式为：MATMSG:TO:${address};SUB:${subject};BODY:${message};;，参数说明如下：

address：收件人的邮箱地址
subject：邮件主题
message：邮件主体内容

短信

扫码发送短信的格式为：SMSTO:${phone}:${message}，参数说明如下：

phone：收信人的电话号码
message：短信内容

联系人

扫码添加联系人的功能依靠VCard实现：

BEGIN:VCARD
VERSION:3.0
N:${name}
FN:${foramt_name}
GENDER:${gender}
TEL:${phone}
EMAIL:${email}
ORG:${org}
TITLE:${title}
ROLE:${role}
ADR:${address}
BDAY:${birthday}
URL:${website}
END:VCARD

name：联系人标识名称，例如：N:Public;John;Quinlan;Mr.;Esq.
format_name：用于格式化地表示联系人，例如：FN:Mr. John Q. Public, Esq.
gender：联系人的性别，分别有：M（male）、F（female）、O（other）、N（none or not applicable）、U（unknown）
phone：联系人的电话号码
email：联系人的电子邮箱地址
org：联系人所在的组织名称，一般是公司名
title、role：联系人的头衔和职务
address：联系人地址
birthday：联系人的出生日期
website：联系人的网址

更详细的内容可以参见：VCard elements和VCard format specification。