步骤 1：准备工作

确保你的前端项目中已经集成了一个二维码生成器库，比如常用的 qrcode 库。如果还没有安装，可以通过 npm 进行安装：

yarn add qrcode

步骤 2：编写生成二维码的函数

创建一个函数，用于在前端生成带有 Logo 的二维码。以下是一个示例函数：步骤 3：调用生成函数

在需要的地方调用这个函数，并传入要生成二维码的 URL 和 Logo 图片的 URL：

function generateQRCodeWithLogo(url, logoUrl, size = 256) {
  const canvas = document.createElement('canvas');
  canvas.width = size;
  canvas.height = size;
  const ctx = canvas.getContext('2d');

  // 生成空白的二维码
  QRCode.toCanvas(canvas, url, { width: size, height: size }, function (error) {
    if (error) console.error(error);

    const img = new Image();
    img.src = logoUrl;
    img.crossOrigin = 'Anonymous'; // 允许跨域访问图片

    img.onload = function () {
      const centerX = (canvas.width - size / 4) / 2; // 计算 Logo 的居中位置
      const centerY = (canvas.height - size / 4) / 2;

      // 绘制 Logo
      ctx.drawImage(img, centerX, centerY, size / 4, size / 4);

      // 显示二维码及 Logo
      const qrCodeImg = document.createElement('img');
      qrCodeImg.src = canvas.toDataURL(); // 获取二维码图片的 Data URL
      document.body.appendChild(qrCodeImg); // 将生成的二维码插入到页面中
    };
  });
}

这个函数将创建一个带有 Logo 的二维码，并将其显示在页面上。记得替换示例中的 URL 为你的实际地址。如果有其他需要帮助的地方，请随时告诉我。