二维码越来越普及，我们现在经常需要为网站或应用生成二维码，但是在前端实现这个功能并不容易。好在现在有很多成熟的 npm 包可以帮我们轻松搞定，其中 browser-qr-js 就是一个很好用的生成二维码的工具。
安装
安装很简单，只需要在终端里执行：
npm install browser-qr-js
使用
在代码中引入：
const Qr = require('browser-qr-js');然后可以调用 Qr.generateQR() 方法来生成二维码。
const QRCode = Qr.generateQR('hello, world!');以上代码会生成一个包含 hello, world! 内容的二维码。可以将这个二维码展示在页面上，比如将它作为 src 属性赋值给一个 img 标签。
<img src="${QRCode.toDataURL()}">高级用法
browser-qr-js 还提供了很多选项，可以让你自定义生成的二维码。
选择 ECC 纠错等级
ECC 纠错等级从 L（7%）到 H（30%）不等。高等级的纠错能力意味着二维码可以被破坏或部分损坏，但仍然能被扫描识别出来。默认情况下是 M，即 15% 的纠错能力。
const qr = Qr.generateQR('hello, world!', { ecclevel: 'L' }); // 设置纠错等级为 L选择二维码尺寸
默认的尺寸是 400x400，但是可以通过 size 选项修改二维码尺寸。
const qr = Qr.generateQR('hello, world!', { size: 200 }); // 修改为 200x200 的尺寸自定义颜色和背景色
color 和 bgcolor 选项被用来修改生成的二维码的颜色和背景色。
const qr = Qr.generateQR('hello, world!', { color: '#3f3f3f', bgcolor: '#f2f2f2' }); // 将颜色修改为黑色，背景色修改为灰色生成方式
browser-qr-js 提供了两种生成方式，canvas 和 svg。默认使用 canvas。
const qr = Qr.generateQR('hello, world!', { type: 'svg' }); // 使用 svg 格式示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------- ------------
-------
------
------- -----------------------------------------------------------------------------------------------
--------
----- -- - --------------
----- -- - --------------------- ---------
----- --- - ------------------------------
------- - ---------------
-------------------------------
---------
-------
-------以上代码会在页面上生成一个包含 hello, world! 内容的二维码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde51a6