vue3使用html2canvas

在Vue3中使用html2canvas插件需要注意以下几点：
1. 首先需要安装html2canvas插件，可以使用npm或yarn进行安装。
2. 在需要使用html2canvas的组件中引入插件：import html2canvas from 'html2canvas';
3. 在组件中使用html2canvas生成图片时，需要获取元素高度，确保生成图片时不会出现问题，可以使用domObj.clientHeight或者ref获取元素的高度。
4. 在调用html2canvas函数时，需要设置useCORS: true，以解决跨域问题。
5. 最后，可以将生成的图片作为组件的data或props进行传递和使用。

下面是一个简单的Vue3组件中使用html2canvas生成图片的示例代码：

<template>
<div ref="postHtml">
<!-- 需要生成图片的内容 -->
</div>
<button @click="generateImage">生成图片</button>
<img :src="imageSrc" alt="生成的图片">
</template>

<script>
import html2canvas from 'html2canvas';

export default {
data() {
return {
imageSrc: '',
};
},
methods: {
generateImage() {
const postHtml = this.$refs.postHtml;
html2canvas(postHtml, {
useCORS: true,
height: postHtml.clientHeight,
}).then(canvas => {
this.imageSrc = canvas.toDataURL();
});
},
},
};
</script>