一、 效果展示

背景图片	页面效果	最终融合保存的图片

二、核心代码实现

html

<el-button
                  type="success"
                  size="small"
                  class="m-r-2"
                  :loading="posterLoading"
                  @click="initPoster()"
                >
                  生成海报
                </el-button>
<el-button @click="downloadPoster" type="success">保存二维码到本地</el-button>

js

import QRCode from "qrcode";

// 初始化海报
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
// 海报背景图路径
const bgImagePath = new URL("@/assets/images/link-bg.jpg", import.meta.url).href;

//生成二维码+背景的图片
async function initPoster() {
  posterLoading.value = true;
  

  const posterCode = "二维码信息";

  try {
    // 加载背景图片
    const bgImage = await loadImage(bgImagePath);

    // 设置 canvas 尺寸为背景图尺寸
    canvas.width = bgImage.width;
    canvas.height = bgImage.height;

    // 绘制背景图
    ctx.drawImage(bgImage, 0, 0);

    // 生成二维码
    const qrDataUrl = await QRCode.toDataURL(posterCode, {
      margin: 2, // 设置白边
      width: 400, // 二维码尺寸
      color: {
        dark: "#000000", // 黑色模块
        light: "#FFFFFF", // 白色背景
      },
    });

    const qrImage = await loadImage(qrDataUrl);

    // 设置二维码绘制的位置
    const qrSize = 400;
    const x = (canvas.width - qrSize) / 2;
    const y = canvas.height - qrSize - 100; // 距离底部 100px

    // 绘制二维码
    ctx.drawImage(qrImage, x, y, qrSize, qrSize);

    // 将合成后的图像转为 DataURL
    const finalImage = canvas.toDataURL("image/png");

    // 显示弹窗并设置图片
    posterImage.value = finalImage;
    posterDialogVisible.value = true;
    posterLoading.value = false;
  } catch (error) {
    console.error("生成海报失败:", error);
    posterLoading.value = false;
  }
}
// 加载背景图片
function loadImage(src: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = "anonymous"; // 避免跨域问题
    img.src = src;
    img.onload = () => resolve(img);
    img.onerror = reject;
  });
}
//保存图片
function downloadPoster() {
  const link = document.createElement("a");
  const today = day().format("YYYY-MM-DD");
  link.href = posterImage.value;
  link.download = `${WEWORK_CONFIG.APP_NAME}APP_${today}.png`;
  link.click();
}