Generate QR Codes with Logos in Vue Using qrcode & Jimp

Introduction

This article records the process of generating QR codes on the front end with Vue, using the qrcode and jimp dependencies.

Origin of QR Codes

In the 1950s, barcodes were invented in Japan to speed up checkout by replacing handwritten records. Because barcodes could store only limited data, QR codes were later created to hold much more information.

Environment Setup

npm Installation

npm install qrcode jimp

Import Modules

import QRCode from 'qrcode'; import Jimp from 'jimp';

Generating QR Codes

Standard QR Code

Use the QRCode.toCanvas method to render a QR code directly onto an HTML element.

// 生成二维码
QRCode.toCanvas(qrCode, text, {
  //宽度
  width: size,
  //间隙
  margin: margin,
  //颜色配置
  color: {
    //前景色
    dark: fgColor,
    //背景色
    light: bgColor
  },
  //容错等级
  errorCorrectionLevel: errorCorrectionLevel
}, (error) => {
  if (error) {
    //生成失败时输出信息
    console.error('生成二维码失败:', error);
    alert('生成二维码失败，请尝试其他内容');
    showEmptyState();
  }
});

QR Code with Logo

Generating a QR code with a centered logo requires creating the QR image as a buffer, loading both the QR image and the logo with Jimp, resizing the logo, calculating its centered position, compositing it onto the QR code, and finally saving the result.

async function generateQRWithLogo(text, logoPath, outputPath) {
  try {
    // 1. 生成二维码的 Buffer（PNG 格式）
    const qrBuffer = await QRCode.toBuffer(text, {
      width: 300, // 二维码宽度
      margin: 2,  // 边距
      color: {
        dark: '#000000', // 二维码深色部分
        light: '#ffffff' // 二维码浅色部分（背景）
      }
    });

    // 2. 加载二维码图片和 logo 图片
    const qrImage = await Jimp.read(qrBuffer);
    const logoImage = await Jimp.read(logoPath);

    // 3. 调整 logo 大小（建议为二维码宽度的 1/5 ~ 1/4，避免遮挡过多信息）
    const logoSize = qrImage.bitmap.width / 4;
    logoImage.resize(logoSize, logoSize, Jimp.RESIZE_BEZIER); // 平滑缩放

    // 4. 计算 logo 位置（居中）
    const x = (qrImage.bitmap.width - logoSize) / 2;
    const y = (qrImage.bitmap.height - logoSize) / 2;

    // 5. 将 logo 叠加到二维码上（可添加白色边框美化）
    qrImage.composite(logoImage, x, y, [
      {
        mode: Jimp.BLEND_SOURCE_OVER,
        opacitySource: 1,
        opacityDest: 1
      }
    ]);

    // 6. 保存最终图片
    await qrImage.writeAsync(outputPath);
    console.log(`带 logo 的二维码已保存到：${outputPath}`);
  } catch (error) {
    console.error('生成失败：', error);
  }
}

Conclusion

In Vue you can generate both ordinary QR codes and QR codes with embedded logos using the qrcode and jimp libraries. While front‑end generation works, it is more involved than server‑side generation, so choose the approach that best fits your project requirements.