当前位置：首页 > VUE

vue按钮实现截屏

2026-02-09 17:02:23VUE

Vue 实现截屏功能的方法

在 Vue 中实现截屏功能可以通过以下几种方式完成，具体选择取决于项目需求和技术栈。

使用 html2canvas 库

html2canvas 是一个流行的 JavaScript 库，可以将 DOM 元素转换为 Canvas 图像，适合截取页面或部分区域。

安装 html2canvas：

npm install html2canvas

在 Vue 组件中使用：

<template>
  <div>
    <div ref="screenshotTarget">
      <!-- 需要截屏的内容 -->
    </div>
    <button @click="captureScreenshot">截屏</button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  methods: {
    async captureScreenshot() {
      const element = this.$refs.screenshotTarget;
      const canvas = await html2canvas(element);
      const image = canvas.toDataURL('image/png');
      this.downloadImage(image, 'screenshot.png');
    },
    downloadImage(dataUrl, filename) {
      const link = document.createElement('a');
      link.href = dataUrl;
      link.download = filename;
      link.click();
    }
  }
};
</script>

使用第三方截图组件

如果需要更复杂的截图功能（如区域选择），可以使用现成的 Vue 截图组件，例如 vue-web-screen-shot。

安装：

npm install vue-web-screen-shot

使用示例：

<template>
  <screen-shot @getImgData="getImgData" />
</template>

<script>
import ScreenShot from 'vue-web-screen-shot';

export default {
  components: { ScreenShot },
  methods: {
    getImgData(data) {
      console.log(data); // 获取截图数据
    }
  }
};
</script>

使用浏览器原生 API

对于简单的全屏截图，可以使用浏览器的原生 API（需要用户授权）：

vue按钮实现截屏

<template>
  <button @click="captureScreen">截取屏幕</button>
</template>

<script>
export default {
  methods: {
    async captureScreen() {
      try {
        const stream = await navigator.mediaDevices.getDisplayMedia();
        const videoTrack = stream.getVideoTracks()[0];
        const imageCapture = new ImageCapture(videoTrack);
        const bitmap = await imageCapture.grabFrame();

        const canvas = document.createElement('canvas');
        canvas.width = bitmap.width;
        canvas.height = bitmap.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(bitmap, 0, 0);

        const image = canvas.toDataURL('image/png');
        this.downloadImage(image, 'screen.png');

        videoTrack.stop();
      } catch (error) {
        console.error('截屏失败:', error);
      }
    },
    downloadImage(dataUrl, filename) {
      const link = document.createElement('a');
      link.href = dataUrl;
      link.download = filename;
      link.click();
    }
  }
};
</script>