njDaTuSha/src/pages/share/index.vue

<template>
  <div class="share-pg">

    <GoBack class="goback abs" style="z-index: 100" @click="router.go(-1)" />

    <div class="will-copy" ref="src">
      <img class="copy-img" src="/images/share.jpg" alt="" />
      <div class="content txt">
        <div class="name">{{ user.nickname || "朋友" }}</div>
        <div style="line-height: 1.6em">
          您是第{{user.num}}位“紫金草行动”参与者。播撒紫金草种子，让和平之花开满全城。
        </div>
      </div>
    </div>
    <img class="img-target" :src="imgData" v-if="imgData" alt="" />
  </div>
</template>

<script setup>
import { onMounted,watch, ref } from "vue";
import html2canvas from "html2canvas";
import { useModel } from "@zjxpcyc/vue-tiny-store";
import { useRouter } from "vue-router";
import GoBack from "@/components/GoBack.vue";

const router = useRouter();
const { user } = useModel("user");
const imgData = ref();
const src = ref();


onMounted(() => {
  setTimeout(()=>{
    html2canvas(src.value).then((canvas) => {
    imgData.value = canvas.toDataURL("image/jpg", 0.8);
  });
  },1000)
});
</script>

<style lang="less" scoped>
.share-pg {
  position: relative;
  .goback{
    z-index: 100;
    left: 10px;
    top: 10px;
  }

  .will-copy {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;

    .copy-img {
      width: 100%;
      height: 100%;
    }
  }

  .content {
    position: absolute;
    top: 55vh;
    left: 10vw;
    text-align: left;
    width: 56vw;

    .name {
      font-size: 18px;
    }
  }

  .img-target {
    position: absolute;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
  }
}
</style>