在vue3中使用

在Vue 3中使用HTML2Canvas与在Vue 2中的使用方式基本相同，只需要将HTML2Canvas库引入到Vue项目中即可。以下是一个简单的使用HTML2Canvas库的Vue 3组件示例：

<template>
  <div>
    <div ref="myDiv">Hello world!</div>
    <button @click="capture">Capture</button>
    <div v-if="capturedImage">
      <img :src="capturedImage" alt="Captured Image">
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  data() {
    return {
      capturedImage: null
    };
  },
  methods: {
    capture() {
      html2canvas(this.$refs.myDiv).then(canvas => {
        // 将Canvas转换成图像URL
        this.capturedImage = canvas.toDataURL();
      });
    }
  }
};
</script>

在这个示例中，我们使用`ref`指令将一个div元素引用为`myDiv`，然后在`capture`方法中，使用HTML2Canvas库将该div元素转换成Canvas图像，并将其转换成图像URL，最后将该URL赋值给`capturedImage`属性，以显示捕获的图像。