vue3如何將html元素變成canvas(海報生成),進行圖片保存/截圖

// 網頁上隻有一張圖片 我們可以直接就進行圖片保存
// 但是你想 保存這張圖片的時候 順便把下面的字也帶上  相當於截圖  那請你像我這樣做
 <div id="capture" style="padding: 10px; background: #fff">
      <img :src="whoImg" style="width: 300px" alt="" />
      <h4 style="color: #000">Hello world!</h4>
 </div>
 // 觸發按鈕
 <button @click="isShow()">生成海報</button>
 //這裡是創建一個容器 存放你待會想保存的圖片  也就是你想要的截圖
<div ref="wrapper" id="wrapper" v-show="show" @click="remove()"></div>

// 引入插件 沒有就直接下 npm install html2canvas filesaver --save
import html2canvas from 'html2canvas';

setup() {
// 隨便搞張圖
let whoImg=require('../assets/1.png').default;
// 綁定你的容器
let wrapper = ref();
// 控制容器顯示
let show = ref(false);
// 鎖 防止 多次生成
let lock = ref(1);
// 觸發
const isShow = () => {
   show.value = true;
   //  html2canvas的方法  傳你要截圖的盒子  會把盒子內的所有元素都變成一張canvas圖片
   html2canvas(document.querySelector('#capture')).then((canvas) => {
   if (lock.value) {
   // 給容器加入這個canvas
      wrapper.value.appendChild(canvas);
      lock.value = 0;
    }
  });
};
// 移除這個容器內容
const remove = () => {
      show.value = false;
      if (!lock.value) {
        lock.value = 1;
        wrapper.value.innerHTML = '';
      }
 };


}

// 圖片大小
img {
    width: 300px;
 }
 // 放canvas這個容器的大小
#wrapper {
  width: 500px;
  height: 500px;
  position: fixed;
  top: 0;
  left: 0;
  // 這下面是vant自定義的組件樣式用的 不打緊
  z-index: var(--van-overlay-z-index);
  background-color: var(--van-overlay-background-color);
}

npm install --save html2canvas

import html2canvas from "html2canvas"

<div ref="imageWrapper">
      <div class="success">
        <div class="img">
          <img class="img-icon" src="../assets/success.png"/>
          <p style="font-weight: 600; font-size: 18px">支付成功</p>
        </div>
      </div>
      <div class="success-detail">
        <el-row style="margin-top: 10px;">
          <el-col :span="5" class="col-left-suc">收款商傢</el-col>
          <el-col :span="16" class="col-right">{{merchant}}</el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="5" class="col-left-suc">費用名稱</el-col>
          <el-col :span="16" class="col-right">{{contName}}</el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="5" class="col-left-suc">繳費金額</el-col>
          <el-col :span="16" class="col-right">{{chargePrice}}元</el-col>
        </el-row>
      </div>
    </div>
    <div class="button">
      <el-button style="width: 70%;" type="success" size="small" @click="toImage">生成截圖</el-button>
    </div>

toImage() {
        html2canvas(this.$refs.imageWrapper).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
          this.imgUrl = dataURL;
          if (this.imgUrl !== "") {
            this.dialogTableVisible = true;
          }
        });
      }