当前位置：首页 > VUE

vue实现屏幕截取

2026-02-19 03:26:16VUE

Vue实现屏幕截取的几种方法

使用html2canvas库

html2canvas是一个流行的JavaScript库，可以将网页元素转换为Canvas图像。安装html2canvas：

npm install html2canvas

在Vue组件中使用：

import html2canvas from 'html2canvas';

methods: {
  captureScreen() {
    html2canvas(document.body).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      this.downloadImage(imgData, 'screenshot.png');
    });
  },
  downloadImage(data, filename) {
    const link = document.createElement('a');
    link.href = data;
    link.download = filename;
    link.click();
  }
}

使用第三方截图组件

vue-web-screen-shot是一个专为Vue开发的截图组件：

vue实现屏幕截取

npm install vue-web-screen-shot

基本用法：

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

export default {
  components: {
    ScreenShot
  },
  methods: {
    handleComplete(data) {
      console.log(data); // 获取截图base64数据
    }
  }
}

使用Canvas API原生实现

通过Canvas API可以直接捕获屏幕内容：

vue实现屏幕截取

methods: {
  captureWithCanvas() {
    const video = document.createElement('video');
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    navigator.mediaDevices.getDisplayMedia({ video: true })
      .then(stream => {
        video.srcObject = stream;
        video.onloadedmetadata = () => {
          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
          stream.getTracks().forEach(track => track.stop());

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

使用Electron的桌面截图功能

在Electron-Vue应用中可以使用desktopCapturer：

const { desktopCapturer } = require('electron');

methods: {
  async electronCapture() {
    const sources = await desktopCapturer.getSources({ types: ['screen'] });
    for (const source of sources) {
      if (source.name === 'Entire Screen') {
        const imgData = source.thumbnail.toDataURL();
        this.downloadImage(imgData, 'electron-capture.png');
        break;
      }
    }
  }
}

实现区域选择截图

结合鼠标事件实现区域选择截图：

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;

    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
    }).then(canvas => {
      const imgData = canvas.toDataURL();
      this.downloadImage(imgData, 'selection.png');
    });

    this.isSelecting = false;
  }
}