vue3 截图插件html2canvas

HTML2Canvas是一个JavaScript库，用于将网页内容渲染成图片，常用于Vue.js项目中生成截图功能，尤其是在需要导出页面静态展示效果的时候。在Vue3中，可以利用这个插件实现动态截取DOM元素的内容，包括Vue组件内的内容。

以下是引入和使用的简单步骤：

1. 安装依赖：使用npm或yarn安装`html2canvas`，如：

   npm install html2canvas --save
   # 或者
   yarn add html2canvas

2. 在Vue组件内导入并使用：

import html2canvas from 'html2canvas';

export default {
  methods: {
    screenshot() {
      const element = this.$el; // 获取当前组件的根元素
      html2canvas(element)
        .then(canvas => {
          // 将canvas转换为DataURL，然后保存或显示
          const imgURL = canvas.toDataURL('image/png');
          // 这里可以根据需求进一步操作，比如下载、赋值给img标签等
        })
        .catch(error => {
          console.error('Error while capturing screenshot:', error);
        });
    }
  }
}