利用qr.js + canvas 生成图片文件 - nodejs版

在Node.js环境下生成PNG格式的二维码图像

在Node.js环境下生成PNG格式的二维码图像，你可以使用 canvas 库来绘制二维码，并将其保存为PNG文件。下面是一个完整的代码示例，展示如何在Node.js中生成二维码并保存为PNG图像：

步骤

  1. 安装必要的依赖包
    bash
    npm install canvas

  2. 生成PNG图像的代码

   import QRCodeImpl from "qr.js/lib/QRCode.js";
   import ErrorCorrectLevel from "qr.js/lib/ErrorCorrectLevel.js";
   import { createCanvas } from 'canvas';
   import fs from 'fs';

   // 生成二维码
   const qrcode = new QRCodeImpl(-1, ErrorCorrectLevel.H);
   qrcode.addData('afei');
   qrcode.make();

   // 获取二维码模块的大小和数据
   const size = qrcode.getModuleCount();
   const cellSize = 10; // 每个模块的大小，调整这个值可以改变二维码的尺寸
   const margin = 4 * cellSize; // 留白的大小

   // 创建Canvas
   const canvas = createCanvas(size * cellSize + margin * 2, size * cellSize + margin * 2);
   const ctx = canvas.getContext('2d');

   // 绘制二维码背景
   ctx.fillStyle = '#ffffff';
   ctx.fillRect(0, 0, canvas.width, canvas.height);

   // 绘制二维码
   ctx.fillStyle = '#000000';
   for (let row = 0; row < size; row++) {
       for (let col = 0; col < size; col++) {
           if (qrcode.isDark(row, col)) {
               ctx.fillRect(
                   margin + col * cellSize,
                   margin + row * cellSize,
                   cellSize,
                   cellSize
               );
           }
       }
   }

   // 保存为PNG文件
   const out = fs.createWriteStream('qrcode.png');
   const stream = canvas.createPNGStream();
   stream.pipe(out);
   out.on('finish', () => console.log('QR code PNG file generated: qrcode.png'));

代码解释

  1. 二维码生成:

    • QRCodeImpl 和 ErrorCorrectLevel 用于生成二维码数据。
    • qrcode.addData('afei') 添加二维码要编码的数据。
    • qrcode.make() 生成二维码矩阵。

  2. Canvas创建与绘制:

    • 使用 canvas 库创建一个Canvas对象，并获取2D上下文。
    • 设置每个模块的大小(cellSize)和外部留白(margin)。
    • 使用 ctx.fillRect() 方法根据二维码数据在Canvas上绘制黑白模块。

  3. 保存PNG文件:

    • 使用 fs.createWriteStream() 创建一个写入流，并通过 canvas.createPNGStream() 将Canvas内容保存为PNG格式。
    • 最后，将生成的PNG图像保存为文件 qrcode.png。

这样，代码运行后，会在当前目录下生成一个名为 qrcode.png 的二维码图片。