Vue移動端h5使用canvas將頁面生成海報 保存分享 （html2canvas）

<template>
  <div>
    <div class="qrcodeposter_wrap" v-if="showDom" id="canvasPoster">
      <img class="avatar_pic" :src="avatarImg"  @load="imgLoad" alt />
      <div class="name">{{userName}}</div>
      <div class="interview">邀請你加入代表通</div>
      <div class="title">#掃描下方二維碼邀請目標醫生 加入專區#</div>
      <!-- <div class="qrcode_img">{{avatarImg}}</div> -->
      <!-- wx -->
      <div class="codeImg" style="width:1.45rem;height:1.45rem;margin:.15rem auto" id="qrCode"></div>
      <div class="footer_txt">
        邀請語：聖誕快樂！感謝您仍奮戰在守護人類健康的第一線
        ，願您重視自己的健康生活和能力，以提供最高水准的醫療
      </div>
    </div>
    <img style="width:100%;height:100%" :src="dataImg" v-if="dataImg" alt>
  </div>
</template>

import QRCode from "qrcode2";
import html2canvas from "html2canvas";

export default {
  data() {
    return {
      avatarImg: "",
      userName: "",
       showDom: true,
      dataImg:''
    };
  },
  created() {
    this.userName = this.curUser.userName;
    this.avatarImg = this.curUser.url;
  },

  computed: {
    ...mapGetters({
      curUser: "user/curUser",
    }),
  },
  mounted() {
    this.QCode();
  },
  methods: {
    // 創建海報
    createPoster() {
      const poster = document.getElementById("canvasPoster");
      html2canvas(poster, {
        dpi: window.devicePixelRatio * 2,
        backgroundColor: "#fff",
        useCORS: true,
        scale: 2,
        async: true,
      }).then((canvas) => {
        this.dataImg = canvas.toDataURL("image/jpeg");
        this.showDom = false;
      });
    },
    imgLoad() {
      this.createPoster();
    },
    // wx 二維碼
    QCode() {
      let qrcode = new QRCode("qrCode", {
        width: 150,
        height: 150, // 高度
        text: `${location.origin}${location.pathname}/#/?inviteUid=${this.curUser.userId}`,
        colorDark: "#000",
        colorLight: "#fff",
      });
    },
  },
};
</script>