如何在Node.js中使用npm包qr-code-styling生成样式化二维码？

qr-code-styling依赖canvas API实现渲染，前端浏览器原生支持该API，但Node.js环境需要额外引入canvas包提供对应能力，具体实现步骤如下：

1. 安装必要依赖 #

同时安装qr-code-styling和Node.js版canvas：

npm install qr-code-styling canvas

2. 编写生成代码示例 #

以下是基础的Node.js代码示例，可生成带自定义样式的二维码并保存为本地图片：

const QRCodeStyling = require('qr-code-styling');
const { createCanvas } = require('canvas');

// 为qr-code-styling注入Node.js环境的canvas实现
QRCodeStyling.prototype.createCanvas = function () {
    return createCanvas();
};

// 配置二维码参数
const qrCode = new QRCodeStyling({
    width: 300,
    height: 300,
    data: "https://example.com",
    image: "path/to/your/logo.png", // 可选：添加中心logo
    dotsOptions: {
        color: "#4267b2",
        type: "rounded"
    },
    backgroundOptions: {
        color: "#e9ebee",
    }
});

// 生成并保存为PNG文件
qrCode.toDataURL({ format: "png" })
    .then(dataUrl => {
        const fs = require('fs');
        const base64Data = dataUrl.replace(/^data:image\/png;base64,/, "");
        fs.writeFileSync("styled-qr.png", base64Data, 'base64');
        console.log("二维码已生成：styled-qr.png");
    })
    .catch(error => {
        console.error("生成失败：", error);
    });

3. 注意事项 #

• 安装canvas包时，部分系统需要提前安装编译依赖：
  • Linux：需安装libcairo2-dev、libjpeg-dev、libpango1.0-dev、libgif-dev等
  • macOS：需安装Xcode命令行工具
  • Windows：需安装Visual Studio构建工具
• 若使用自定义logo图片，需确保图片路径正确，支持PNG、JPG等常见格式

内容的提问来源于stack exchange，提问作者Rajat Masih