当前位置：首页 > VUE

vue实现屏幕截取

2026-01-18 10:59:02VUE

Vue 实现屏幕截取的步骤

使用 html2canvas 库

html2canvas 是一个流行的 JavaScript 库，可以将网页中的元素转换为 Canvas，进而生成截图。在 Vue 项目中可以通过以下方式实现：

安装 html2canvas：

npm install html2canvas

在 Vue 组件中使用：

import html2canvas from 'html2canvas';

export default {
  methods: {
    captureScreen() {
      html2canvas(document.body).then(canvas => {
        const image = canvas.toDataURL('image/png');
        const link = document.createElement('a');
        link.href = image;
        link.download = 'screenshot.png';
        link.click();
      });
    }
  }
}

使用第三方截图组件

一些现成的 Vue 截图组件可以简化实现过程，例如 vue-web-screen-shot：

安装组件：

npm install vue-web-screen-shot

在 Vue 中使用：

import ScreenShot from 'vue-web-screen-shot';

export default {
  components: {
    ScreenShot
  },
  methods: {
    handleScreenshot(image) {
      const link = document.createElement('a');
      link.href = image;
      link.download = 'screenshot.png';
      link.click();
    }
  }
}

使用浏览器原生 API

对于简单的截图需求，可以直接使用浏览器提供的 API 截取整个屏幕或窗口：

export default {
  methods: {
    async captureScreen() {
      try {
        const stream = await navigator.mediaDevices.getDisplayMedia({
          video: { mediaSource: 'screen' }
        });
        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');
        const link = document.createElement('a');
        link.href = image;
        link.download = 'screenshot.png';
        link.click();

        videoTrack.stop();
      } catch (error) {
        console.error('Error capturing screen:', error);
      }
    }
  }
}

实现区域截图功能

如果需要实现选择特定区域截图的功能，可以结合鼠标事件和 Canvas：

vue实现屏幕截取

export default {
  data() {
    return {
      startX: 0,
      startY: 0,
      isSelecting: false
    };
  },
  methods: {
    startSelection(e) {
      this.startX = e.clientX;
      this.startY = e.clientY;
      this.isSelecting = true;
    },
    endSelection(e) {
      if (!this.isSelecting) return;
      this.isSelecting = false;

      const endX = e.clientX;
      const endY = e.clientY;

      const width = Math.abs(endX - this.startX);
      const height = Math.abs(endY - this.startY);
      const left = Math.min(this.startX, endX);
      const top = Math.min(this.startY, endY);

      html2canvas(document.body, {
        x: left,
        y: top,
        width: width,
        height: height,
        scale: 1
      }).then(canvas => {
        const image = canvas.toDataURL('image/png');
        const link = document.createElement('a');
        link.href = image;
        link.download = 'area-screenshot.png';
        link.click();
      });
    }
  }
}