vue3 vite实现对某个标签截屏方式

<template>
  <div id="yourElementId">
    <canvas ref="canvas"></canvas>
    <button @click="captureScreen">截屏</button>
  </div>
  <div style="margin-top: 10px">
    <img :src="shot_image" alt="">
  </div>
</template>

<script setup>
import { ref } from 'vue';
import html2canvas from 'html2canvas';

const canvas = ref(null);
const shot_image = ref("");

// 1. 定义自定义事件，声明事件名和参数类型（传递base64字符串）
const emit = defineEmits(['imageCaptured']);

function captureScreen() {
  const element = document.getElementById('yourElementId');

  html2canvas(element).then(canvas => {
    shot_image.value = canvas.toDataURL('image/png');
    console.log('截图生成成功：', shot_image.value);

    // 2. 截图生成后，触发自定义事件，传递base64图片数据  
    // emit('imageCaptured', shot_image.value);  // 如果需要传递给父组件可以这样实现
  }).catch(error => {
    console.error('截图生成失败：', error);
    alert('截图失败，请重试！');
  });
}
</script>

<style scoped>
#yourElementId {
  width: 100%;
  height: 500px;
  background-color: pink;
  position: relative;
}

button {
  margin: 10px;
  padding: 8px 16px;
  cursor: pointer;
}
</style>