How to turn html elements into canvas (poster generation), save image/screenshot

// There is only one picture on the web page, we can save the picture directly// But when you want to save this picture, you can also bring the following words with you. This is equivalent to a screenshot. Please do it like me. <div  style="padding: 10px; background: #fff">
      <img :src="whoImg" style="width: 300px" alt="" />
      <h4 style="color: #000">Hello world!</h4>
 </div>
 // Trigger button <button @click="isShow()">Generate poster</button>
 //This is creating a container to store the pictures you want to save later, that is, the screenshots you want<div ref="wrapper"  v-show="show" @click="remove()"></div>

// Introduce plug-in If you don't, just download npm install html2canvas filesaver --saveimport html2canvas from 'html2canvas';

setup() {
// Make a picture casuallylet whoImg=require('../assets/').default;
// Bind your containerlet wrapper = ref();
// Control container displaylet show = ref(false);
// Lock prevents multiple generationslet lock = ref(1);
// Triggerconst isShow = () => {
    = true;
   // html2canvas method. Pass the box you want to take a screenshot. It will turn all the elements in the box into a canvas picture.   html2canvas(('#capture')).then((canvas) => {
   if () {
   // Add this canvas to the container      (canvas);
       = 0;
    }
  });
};
// Remove the contents of this containerconst remove = () => {
       = false;
      if (!) {
         = 1;
         = '';
      }
 };


}

// Image sizeimg {
    width: 300px;
 }
 // Put the size of the container#wrapper {
  width: 500px;
  height: 500px;
  position: fixed;
  top: 0;
  left: 0;
  // Here is the vant custom component style.  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/"/>
          <p style="font-weight: 600; font-size: 18px">Payment successfully</p>
        </div>
      </div>
      <div class="success-detail">
        <el-row style="margin-top: 10px;">
          <el-col :span="5" class="col-left-suc">Payment merchant</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">Fee name</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">Payment amount</el-col>
          <el-col :span="16" class="col-right">{{chargePrice}}Yuan</el-col>
        </el-row>
      </div>
    </div>
    <div class="button">
      <el-button style="width: 70%;" type="success" size="small" @click="toImage">Generate screenshots</el-button>
    </div>

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