如何使用HTML2Canvas在H5页面上实现长截图功能，并添加水印，最终封装成组件

//使用版本
"html2canvas": "1.4.1",

<template>
  <div class="container-sosButton">
    <div
      class="button border-radius-circular flex-center-column color-white background-color-primary"
      @click="saveToImg"
    >
      下载页面
    </div>
    <van-overlay :show="show">
      <div class="wrapper" @click.stop>
        <van-loading size="24px">生成中... 请手动保存图片</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'

import { ImagePreview, Toast } from 'vant'
export default {
  name: 'BmDowloadPage',
  data() {
    return {
      show: false
    }
  },
  methods: {
    saveToImg() {
      this.show = true
      setTimeout(() => {
        // 点击预览的回调事件

        const element = this.$parent.$children[1].$el // 需要导出的页面
        html2canvas(element, {
          allowTaint: true,
          useCORS: true,
          height: this.$parent.$children[1].$el.scrollHeight,
          windowHeight: this.$parent.$children[1].$el.scrollHeight,
          backgroundColor: 'rgb(242, 243, 245)'
          // scale: 1
        }).then(canvas => {
          // imgUrl 是图片的 base64格式 代码 png 格式
          const imgUrl = canvas.toDataURL('image/png')
          // 图片预览功能
          // setImageUrl(imgUrl)
          if (imgUrl !== '') {
            // setTimeout(() => {
            this.show = false
            this.imgAgeSrc(imgUrl)
            // }, 1000)
          } else {
            Toast.fail('暂不支持查看')
          }
        })
      }, 500)
    },
    imgAgeSrc(src) {
      const img = new Image()
      img.src = src
      img.crossOrigin = 'anonymous'
      img.onload = function() {
        const canvas = document.createElement('canvas')
        const _ix = img.width
        const _iy = img.height
        console.log(_ix, _iy)
        canvas.width = _ix
        canvas.height = _iy
        const ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0)

        ctx.font = '50px Microsoft Yahei'
        ctx.fillStyle = 'rgba(237, 240, 249,.8)'
        ctx.translate(0, 0)
        ctx.rotate((Math.PI / 180) * -30) // 旋转
        // 水印密度
        for (let i = 0; i < _iy / 20; i++) {
          for (let j = 0; j < _ix / 20; j++) {
            ctx.fillText('我是水印', -i * 200, j * 300, _ix)
          }
        }
        const base64Url = canvas.toDataURL()
        ImagePreview([base64Url])
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container-sosButton {
  position: fixed;
  bottom: 73px;
  right: 20px;

  z-index: 10;
  text-align: center;
  .button {
    width: 52px;
    height: 52px;
    font-size: 12px;
    span {
      line-height: 12px;
    }
  }
  .content {
    .item {
      padding: 8px 0;
      text-align: center;
      position: relative;
      box-shadow: inset 0 0 0 0 #edeff7;
      .h3 {
        font-size: var(--font-size-m);
      }
      p {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
      }
      .van-icon {
        position: absolute;
        left: 24px;
        top: 50%;
        margin-top: -10px;
      }
    }
  }
  .spacing {
    background: var(--color-bg);
    height: 10px;
  }
  .cancle {
    text-align: center;
    padding: 14px 0;
    color: var(--color-primary);
    font-size: var(--font-size-ml);
  }
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .container-sosButton {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>

唯一需要改的就是这一行代码    const element = this.$parent.$children[1].$el // 需要导出的页面
这一行代码就是你需要长截图的htmlElement