使用Electron如何实现截屏功能?

在 Electron 中,你可以使用 desktopCapturer API 和 html2canvasdom-to-image 这样的库来实现截屏功能。但如果你想要截取整个屏幕的截图,而不是 Electron 应用窗口的截图,那么 desktopCapturer 是更合适的选择。

以下是一个使用 desktopCapturer API 的基本示例:

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

async function captureScreen() {
  try {
    const inputSources = await desktopCapturer.getSources({ types: ['window', 'screen'] });

    for (const inputSource of inputSources) {
      if (inputSource.name === 'Entire screen' || inputSource.name === '全屏') {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: false,
          video: {
            mandatory: {
              chromeMediaSource: 'desktop',
              chromeMediaSourceId: inputSource.id,
              minWidth: 1280,
              maxWidth: 1280,
              minHeight: 720,
              maxHeight: 720
            }
          }
        });

        handleStream(stream);
      }
    }
  } catch (e) {
    console.error(e);
  }
}

function handleStream(stream) {
  const video = document.createElement('video');
  video.srcObject = stream;

  video.addEventListener('loadeddata', function() {
    const canvas = document.createElement('canvas');
    canvas.width = this.videoWidth;
    canvas.height = this.videoHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
    const dataUrl = canvas.toDataURL('image/png');
    const buffer = Buffer.from(dataUrl.replace(/^data:image\/\w+;base64,/, ''), 'base64');
    fs.writeFileSync(path.join(__dirname, 'screenshot.png'), buffer);
    stream.getTracks().forEach(track => track.stop());
  });
}

captureScreen();

注意:这个代码示例需要在一个 Electron 环境中运行,因为它使用了 Electron 提供的 desktopCapturer API 和 Node.js 的 fs 模块。此外,由于安全和隐私的考虑,navigator.mediaDevices.getUserMedia 可能需要在用户的同意下才能访问屏幕。

另外,如果你只是想截取 Electron 应用窗口的内容,那么可以使用 html2canvasdom-to-image 这样的库来将 DOM 元素转换为图片。这种方法不需要用户的额外权限,但只能截取到应用窗口的内容,无法截取到屏幕上的其他内容。

posted @ 2025-01-07 09:29  王铁柱6  阅读(364)  评论(0)    收藏  举报