当前位置：首页 > VUE

vue实现截屏预览

2026-02-22 10:48:57VUE

实现截屏预览功能

在Vue中实现截屏预览功能通常需要借助第三方库或原生API，以下是几种常见方法：

使用html2canvas库

安装html2canvas库：

npm install html2canvas

在Vue组件中使用：

<template>
  <div>
    <div ref="captureArea" class="capture-area">
      <!-- 需要截屏的内容 -->
    </div>
    <button @click="capture">截屏</button>
    <img v-if="previewImage" :src="previewImage" class="preview-image">
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  data() {
    return {
      previewImage: null
    };
  },
  methods: {
    async capture() {
      const element = this.$refs.captureArea;
      const canvas = await html2canvas(element);
      this.previewImage = canvas.toDataURL('image/png');
    }
  }
};
</script>

<style>
.capture-area {
  border: 1px solid #ccc;
  padding: 20px;
}
.preview-image {
  margin-top: 20px;
  max-width: 100%;
  border: 1px solid #eee;
}
</style>

使用WebRTC实现屏幕截图

通过浏览器API实现屏幕截图：

<template>
  <div>
    <video ref="video" autoplay></video>
    <canvas ref="canvas" style="display:none;"></canvas>
    <button @click="startCapture">开始捕获</button>
    <button @click="takeSnapshot">截屏</button>
    <img v-if="photo" :src="photo" alt="截图预览">
  </div>
</template>

<script>
export default {
  data() {
    return {
      photo: null,
      stream: null
    };
  },
  methods: {
    async startCapture() {
      try {
        this.stream = await navigator.mediaDevices.getDisplayMedia({
          video: true
        });
        this.$refs.video.srcObject = this.stream;
      } catch (err) {
        console.error("Error: " + err);
      }
    },
    takeSnapshot() {
      const video = this.$refs.video;
      const canvas = this.$refs.canvas;
      const context = canvas.getContext('2d');

      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      context.drawImage(video, 0, 0, canvas.width, canvas.height);

      this.photo = canvas.toDataURL('image/png');

      if (this.stream) {
        this.stream.getTracks().forEach(track => track.stop());
      }
    }
  }
};
</script>

使用第三方组件vue-web-capture

安装vue-web-capture：

npm install vue-web-capture

使用示例：

<template>
  <div>
    <vue-web-capture
      ref="capture"
      @capture="onCapture"
    >
      <!-- 需要截屏的内容 -->
      <div class="content-to-capture">
        <h1>可截屏内容</h1>
      </div>
    </vue-web-capture>

    <button @click="capture">截屏</button>
    <img v-if="image" :src="image" />
  </div>
</template>

<script>
import VueWebCapture from 'vue-web-capture';

export default {
  components: {
    VueWebCapture
  },
  data() {
    return {
      image: null
    };
  },
  methods: {
    capture() {
      this.$refs.capture.capture();
    },
    onCapture(image) {
      this.image = image;
    }
  }
};
</script>