在 Vue 应用中使用 HTML2Canvas

<template>
  <div>
    <div id="capture">
      <!-- 需要截图的内容 -->
      <h1>Hello World</h1>
    </div>
    <button @click="captureElement">截图</button>
    <div v-if="screenshot">
      <img :src="screenshot">
    </div>
  </div>
</template>
 
<script>
import html2canvas from 'html2canvas';
 
export default {
  data() {
    return {
      screenshot: null,
    };
  },
  methods: {
    async captureElement() {
      try {
        const canvas = await html2canvas(document.querySelector('#capture'));
        this.screenshot = canvas.toDataURL('image/png');
      } catch (error) {
        console.error('截图失败:', error);
      }
    }
  }
};
</script>

这段代码展示了如何在Vue应用中使用html2canvas库来捕获页面元素并转换成图片。在模板中定义了需要截图的内容和一个按钮用于触发截图函数。在脚本中，我们引入了html2canvas库，并在methods中定义了captureElement方法，该方法会在按钮被点击时被调用。方法中使用html2canvas捕获id为capture的DOM元素，并将捕获的内容转换为Canvas对象，然后将Canvas对象转换为图片的DataURL，最后将这个图片的DataURL赋值给screenshot数据属性，用于在模板中显示。