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。