qrcode-npm 是一个实用的 npm 包，可以用来生成 QR 码。它的优点是易于使用，安装方便，支持多种格式的二维码输出，可以自定义样式和尺寸等等。
如果你是前端开发人员，可能会经常遇到需要创建 QR 码的场景，如给移动端网页提供分享链接，或提供扫码登录等功能。这时，qrcode-npm 就能派上用场了。
在这篇文章中，我将介绍如何使用 qrcode-npm 包来生成 QR 码，并给出一些示例代码供参考。
安装
安装 qrcode-npm 的方式也很简单，只需要在你的项目目录下执行以下命令即可：
npm install qrcode-npm --save
这里我们使用了 npm 包管理器，还加了 --save 选项表示将这个包保存到项目的 package.json 文件中。
使用
在安装完 qrcode-npm 后，你可以在 js 文件中引入它，然后就可以使用 QrcodeGenerator 类的实例来生成 QR 码了。下面是一个简单的例子：
const QrcodeGenerator = require('qrcode-npm'); const qr = new QrcodeGenerator(); qr.create('Hello World!', function (err, code) { console.log(code); });
这里，我们首先通过 require 函数将 qrcode-npm 包引入，然后创建了一个 QrcodeGenerator 类的实例 qr。接着调用了 qr 实例的 create 方法来生成 QR 码。
create 方法有两个参数。第一个参数是要编码成 QR 码的数据，这里我们用字符串 Hello World! 作为例子。第二个参数则是回调函数，在生成 QR 码后执行。
回调函数的第一个参数是错误信息，第二个参数则是生成的 QR 码。这里我们将它输出到控制台。
自定义样式
除了默认的样式外，你还可以使用 qrcode-npm 提供的选项来自定义生成的 QR 码。下面是一些可用的选项：
eclevel：指定错误校验级别。值可以是l,m,q,h中的一个，默认为m。version：指定 QR 码的版本号，范围是 1 到 40。如果不指定，qrcode-npm 会尝试自动选择版本号。margin：指定 QR 码的边距大小，默认为 4。size：生成图片的大小，格式为 {width: Number, height: Number}，默认为 {width: 256, height: 256}。fill：三个 RGB 数字值，表示 QR 码的前景色，在黑白二色 QR 码中仅对前景色有效，默认为黑色。back：三个 RGB 数字值，表示 QR 码的背景色，在黑白二色 QR 码中仅对背景色有效，默认为白色。
下面是一个使用了 size 和 fill 选项的例子：
-- -------------------- ---- ------- ----- --------------- - ---------------------- ----- -- - --- ----------------- ----- - ------ ---- ------- --- -- ----- --------- --- ------------------------------------ -------- ----- ----- - ------------------ ---展开代码
输出格式
qrcode-npm 支持多种格式的 QR 码输出，可以生成 PNG、SVG、ASCII 码等。默认情况下，输出格式为 PNG 图像。
下面是一个生成 SVG 格式的例子：
-- -------------------- ---- ------- ----- --------------- - ---------------------- ----- -- - --- ----------------- ----- ----- --- ------------------------------------ -------- ----- ----- - ------------------ ---展开代码
在上面的例子中，我们使用了 type 选项来指定输出格式为 SVG。其他输出格式的选项包括 ascii, utf8, 和 svgPath 等。
完整代码示例
下面是一个将所有选项结合起来使用的完整代码片段。
-- -------------------- ---- ------- ----- --------------- - ---------------------- ----- -- - --- ----------------- -------- ---- -------- -- ------- -- ----- ------ ----- - ------ ---- ------- --- -- ----- ---------- ----- ------------- --- ------------------------------------ -------- ----- ----- - ------------------ ---展开代码
在这段代码中，我们使用了 eclevel，version, margin 等选项指定了 QR 码的生成规则，使用了 type，size，fill 和 back 选项指定了输出格式的一些细节。
总结
qrcode-npm 是一个实用的 npm 包，可以用于生成 QR 码。在本文中，我们介绍了如何安装和使用它，以及一些自定义选项和输出格式。如果你需要在前端项目中使用 QR 码，qrcode-npm 将是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63713
