介绍
qrize 是一个可以将 URL 或者任何文本转换成二维码的 npm 包。将其应用于你的项目中,以便可以快速生成二维码。
安装
首先需要在项目中引入 qrize 包。可以采用如下命令:
npm install qrize
使用方法
安装好了 qrize 包之后,接下来就可以引用 qrize 来生成二维码。首先,需要在项目中引用库文件,然后在代码中使用。
引用 qrize
const qrize = require('qrize');
生成二维码
生成二维码,需要将使用 qrize
的参数设置为需要生成二维码的文本或者 URL。
示例
-- -------------------- ---- ------- ----- ----- - ----------------- ----- ------ - ------- ----- ------------------------- ----- --- ------- -- -------- -- --------------------- ---- ----- ------ --- ---- ------------ --
参数
text
:需要生成二维码的文本或者 URL。size
:二维码大小,默认设置为 10。margin
:二维码边缘空白区域大小,默认设置为 4。version
:二维码版本,默认为空,由qrize
自动生成。errorCorrectionLevel
:二维码纠错级别,可选参数:'L', 'M', 'Q', 'H'。mode
:指定二维码的模式,默认为 'Byte'。
实现原理
qrize 实现原理是采用 QR 码的生成方式,将文本使用 QR 码的编码方式生成对应的矩阵,再通过 Canvas 生成图片。具体流程如下:
- 计算二维码大小,采用矩阵的方式来存储二维码信息。
- 对文本进行编码,得到矩阵信息。
- 根据矩阵信息,在 Canvas 上渲染二维码图像。
- 导出图像路径,生成二维码。
工作原理解析
二维码图像由大量的黑白块组成,黑白块的编码是根据 QR 码标准进行编码的。
将内容编码成 QR 码的方式:“数据编码”和“结构编码”。
其中“数据编码”是将输入编码成数字或者字母,然后进行压缩。在QR码中,“数字编码"/"字母编码”分别是把 0<del>9、A</del>Z、空格、$、%、*、+、-、.、/、?、@、^、_、`、{、|、 }、~ 等基本字符与形式化数字进行组合,从而生成矩阵。
“结构编码”是为了使被编码数据防止破坏在QR码上进行修正,检验错误、控制对齐等操作。
二维码的最终形式是一个矩阵,矩阵纵向和横向的单位个数是相同的。矩阵设置的单位个数越多,则矩阵的大小越大,其可存储的信息量也就越大。
将矩阵渲染成图像时,使用 Canvas 在指定的尺寸上进行绘制。
注意事项
- qrize 暂时只能生成 URL 和文本的二维码。
- qrize 生成的二维码会有一定的错误纠正能力,但是不推荐修改二维码的错误纠正等级。
- qrize 的图像输出格式是 base64,可以将其用于前端页面渲染。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005707d81e8991b448e7e85