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>