vue3—html元素变成图片canvas（海报生成），进行图片保存，复制就能用

<template>
  <div id="box">
    <!-- capture 要变成图片的Html盒子 这里要写好样式 生成的海报图片就是这个样式大小  -->
    <div id="capture">
      <img :src="whoImg" alt="" />
      <h4>我是html文本，长按保存图片</h4>
    </div>
    <button @click="isShow()">生成海报</button>
    <button @click="nextImg()">下一张</button>
    <button @click="upImg()">上一张</button>
  </div>
  <van-overlay :show="show" :lock-scroll="false">
    <div ref="wrapper" id="wrapper" v-show="show" @click="remove()"></div>
  </van-overlay>
</template>

<script>
import html2canvas from 'html2canvas';
import { onMounted, ref } from '@vue/runtime-core';
import { Overlay } from 'vant';
export default {
  setup() {
    let imgArr = [
      {
        url: require('@/assets/1.png')
      },
      {
        url: require('@/assets/2.png')
      },
      {
        url: require('@/assets/3.png')
      },
      {
        url: require('@/assets/logo.png')
      }
    ];
    let whoImg = ref();
    let indx = ref(0);
    let show = ref(false);
    let lock = ref(1); // 锁
    let wrapper = ref();
    // 生成海报  长按就可以保存
    const isShow = () => {
      show.value = true;
      html2canvas(document.querySelector('#capture')).then((canvas) => {
        if (lock.value) {
          wrapper.value.appendChild(canvas);
          lock.value = 0;
        }
      });
    };
    // 移除海报
    const remove = () => {
      show.value = false;
      if (!lock.value) {
        lock.value = 1;
        wrapper.value.innerHTML = '';
      }
    };
    const nextImg = () => {
      if (indx.value <= 2) {
        indx.value++;
        whoImg.value = imgArr[indx.value].url;
      }
    };
    const upImg = () => {
      if (indx.value >= 1) {
        indx.value--;
        whoImg.value = imgArr[indx.value].url;
      }
    };
    onMounted(() => {
      whoImg.value = imgArr[0].url;
    });
    return {
      whoImg,
      show,
      wrapper,
      imgArr,
      nextImg,
      isShow,
      remove,
      upImg
    };
  },
  components: {
    [Overlay.name]: Overlay
  }
};
</script>

<style scoped lang="scss">
#box {
  background: #ccc;
  width: 100%;
  height: 100%;
  font-size: 16px;
  text-align: center;
  padding-top: 50px;

  #capture {
    width: 600px;
    height: 600px;
    padding: 30px;
    box-sizing: border-box;
    margin: auto;
    img {
      width: 450px;
      height: 450px;
      display: inline-block;
    }
  }
}

#wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>