vue html2canvas

// 使用 vue 和 html2canvas 的示例代码

<template>
  <div>
    <div ref="content" style="width: 300px; height: 200px; background-color: lightblue;">
      这是要截图的内容
    </div>
    <button @click="capture">截图</button>
    <img :src="imageSrc" alt="截图" />
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  data() {
    return {
      imageSrc: ''
    };
  },
  methods: {
    capture() {
      const content = this.$refs.content;
      html2canvas(content).then(canvas => {
        this.imageSrc = canvas.toDataURL();
      });
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>

解释说明：

1. 模板部分 (<template>)：

   • 创建了一个 div，其中包含要截图的内容。
   • 添加了一个按钮，点击时触发 capture 方法进行截图。
   • 使用 <img> 标签展示生成的截图。

2. 脚本部分 (<script>)：

   • 引入了 html2canvas 库。
   • 在 data 中定义了 imageSrc，用于存储生成的截图数据 URL。
   • capture 方法使用 html2canvas 对指定的 DOM 元素进行截图，并将生成的图片转换为 Data URL，赋值给 imageSrc。

3. 样式部分 (<style scoped>)：

   • 可以根据需要添加样式，这里没有特别的样式需求。