npm 包 qrize 使用教程

阅读时长 3 分钟读完

介绍

qrize 是一个可以将 URL 或者任何文本转换成二维码的 npm 包。将其应用于你的项目中,以便可以快速生成二维码。

安装

首先需要在项目中引入 qrize 包。可以采用如下命令:

使用方法

安装好了 qrize 包之后,接下来就可以引用 qrize 来生成二维码。首先,需要在项目中引用库文件,然后在代码中使用。

引用 qrize

生成二维码

生成二维码,需要将使用 qrize 的参数设置为需要生成二维码的文本或者 URL。

示例

-- -------------------- ---- -------
----- ----- - -----------------
----- ------ - -------
  ----- -------------------------
  ----- ---
  ------- --
  -------- --
  --------------------- ----
  ----- ------
---

---- ------------ --

参数

  • text:需要生成二维码的文本或者 URL。
  • size:二维码大小,默认设置为 10。
  • margin:二维码边缘空白区域大小,默认设置为 4。
  • version:二维码版本,默认为空,由 qrize 自动生成。
  • errorCorrectionLevel:二维码纠错级别,可选参数:'L', 'M', 'Q', 'H'。
  • mode:指定二维码的模式,默认为 'Byte'。

实现原理

qrize 实现原理是采用 QR 码的生成方式,将文本使用 QR 码的编码方式生成对应的矩阵,再通过 Canvas 生成图片。具体流程如下:

  1. 计算二维码大小,采用矩阵的方式来存储二维码信息。
  2. 对文本进行编码,得到矩阵信息。
  3. 根据矩阵信息,在 Canvas 上渲染二维码图像。
  4. 导出图像路径,生成二维码。

工作原理解析

二维码图像由大量的黑白块组成,黑白块的编码是根据 QR 码标准进行编码的。

将内容编码成 QR 码的方式:“数据编码”和“结构编码”。

其中“数据编码”是将输入编码成数字或者字母,然后进行压缩。在QR码中,“数字编码"/"字母编码”分别是把 0<del>9、A</del>Z、空格、$、%、*、+、-、.、/、?、@、^、_、`、{、|、 }、~ 等基本字符与形式化数字进行组合,从而生成矩阵。

“结构编码”是为了使被编码数据防止破坏在QR码上进行修正,检验错误、控制对齐等操作。

二维码的最终形式是一个矩阵,矩阵纵向和横向的单位个数是相同的。矩阵设置的单位个数越多,则矩阵的大小越大,其可存储的信息量也就越大。

将矩阵渲染成图像时,使用 Canvas 在指定的尺寸上进行绘制。

注意事项

  1. qrize 暂时只能生成 URL 和文本的二维码。
  2. qrize 生成的二维码会有一定的错误纠正能力,但是不推荐修改二维码的错误纠正等级。
  3. qrize 的图像输出格式是 base64,可以将其用于前端页面渲染。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005707d81e8991b448e7e85

纠错
反馈