记录vue3+Vant+html2canvas实现生成海报功能（包含头像和二维码）

思路：头像是微信获取头像，二维码由后端返回的活动的二维码

HMTL代码：

    <div class="share-btn">
      <van-button class="btn-class" @click="toImg">个人海报</van-button>
    </div>
    <!-- 海报 -->
    <van-popup v-model:show="popupShow" @closed="closPop">
      <div class="popup" v-show="postShow">
        <div id="html-canvas">
          <div class="poster">
            <img
              class="poster-img"
              :src="scoreImage"
              crossorigin="anonymous"
              alt=""
            />
            <div class="head-img">
              <img
                :src="posterImg"
                alt=""
                crossorigin="anonymous"
                @load="imgLoad"
              />
            </div>
            <div class="user">
              {{ userName }}
            </div>
            <div class="qr-code">
              <img :src="actQrcode" alt="" crossorigin="anonymous" />
            </div>
          </div>
        </div>
        <div class="poster-btn" id="shareBtn">
          <!-- <van-button round type="primary" @click="generatePoster"
              >复制分享海报</van-button
            > -->
          <van-button
            color="#111111"
            type="primary"
            @click="download"
            icon="share-o"
            class="custom-button"
            >我要分享</van-button
          >
        </div>
      </div>
    </van-popup>

javascript代码：

import { showLoadingToast } from "vant";
import poster1 from "@/assets/poster/poster1.jpg";
import poster2 from "@/assets/poster/poster2.jpg";
import poster3 from "@/assets/poster/poster3.jpg";
import html2canvas from "html2canvas"; // 引入html2canvas
//默认的微信头像
const headimgurl = localStorage.getItem("headimgurl");
//海报弹框显示
const popupShow = ref(false);
//海报图片显示
const postShow = ref(false);
//根据分数输出不同海报底图
const scoreImage = computed(() => {
  if (achievement.value.score < 60) {
    return poster1; // 第一阶段图片路径
  } else if (achievement.value.score < 90) {
    return poster2; // 第二阶段图片路径
  } else {
    return poster3; // 第三阶段图片路径
  }
});

//个人海报按钮
const toImg = () => {
  popupShow.value = true;
};
//我要分享按钮
function download() {
  const showLoading = showLoadingToast({
    message: "海报生成中，请稍等",
    forbidClick: true,
    loadingType: "spinner",
    duration: 0,
  });
  // 获取要生成海报的DOM元素
  const element = document.getElementById("html-canvas");
  nextTick(() => {
    html2canvas(element, {
      width: element.clientWidth, // 生成图片的宽度
      height: element.clientHeight,// 生成图片的gaodu
      backgroundColor: null,//背景色
      useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
      allowTaint: false, //确保画布不会被标记为“已污染”，从而允许导出图像数据
    }).then((canvas) => {
      const img = new Image();
      img.src = canvas.toDataURL("image/png");
      // 设置图片样式
      img.style.width = "100%";
      img.style.height = "auto";
      // 替换原始内容
      element.innerHTML = "";
      element.appendChild(img);
      // 隐藏分享按钮
      const shareBtn = document.getElementById("shareBtn");
      if (shareBtn) {
        shareBtn.style.display = "none";
      }
      // 添加提示文字
      const hintText = document.createElement("p");
      hintText.textContent = "长按分享或保存";
      hintText.style.textAlign = "center";
      hintText.style.marginTop = "20px";
      hintText.style.fontSize = "20px";
      hintText.style.color = "#fff"; // 你可以根据需要调整颜色
      hintText.style.fontWeight = "bold"; // 你可以根据需要调整颜色
      element.appendChild(hintText);
      img.onload = function () {
        console.log("图片加载完毕！");
        if (showLoading) showLoading.close();
      };
    });
  });
}

css代码：

#html-canvas {
  width: 20rem;
  height: 100%;
  .poster {
    position: relative;
    .poster-img {
      width: 100%;
      height: auto;
    }
    .head-img {
      position: absolute;
      top: 6.25rem;
      left: 10.375rem;
      transform: translateX(-50%);
      img {
        width: 8rem;
        height: 8rem;
        border-radius: 10%;
      }
    }
    .user {
      position: absolute;
      top: 16.75rem;
      right: 14rem;
      font-size: 1.125rem;
      font-weight: 600;
    }
    .qr-code {
      position: absolute;
      bottom: 4rem;
      left: 120px;
      img {
        width: 5rem;
        height: 5rem;
      }
    }
  }
}

效果图：