以下是一个简单的例子，演示如何使用 desktopCapturer 模块获取屏幕截图：
const { app, BrowserWindow, desktopCapturer } = require('electron');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({ width: 800, height: 600 });
mainWindow.loadFile('index.html'); // 加载你的 HTML 文件
// 获取屏幕截图
desktopCapturer.getSources({ types: ['screen'], thumbnailSize: { width: 800, height: 600 } })
.then(sources => {
if (sources.length > 0) {
// 在窗口中显示屏幕截图
mainWindow.webContents.send('screenshot', sources[0].thumbnail.toDataURL());
}
})
.catch(error => console.error(error));
});
// 在主进程中监听截图请求
ipcMain.on('capture-screen', () => {
desktopCapturer.getSources({ types: ['screen'], thumbnailSize: { width: 800, height: 600 } })
.then(sources => {
if (sources.length > 0) {
// 发送截图给渲染进程
mainWindow.webContents.send('screenshot', sources[0].thumbnail.toDataURL());
}
})
.catch(error => console.error(error));
});
在这个例子中，我们使用 desktopCapturer.getSources 方法获取屏幕截图。在主进程中，我们在应用程序就绪后创建了一个主窗口，并在窗口加载完成后使用 desktopCapturer.getSources 方法获取屏幕截图。然后，我们通过 mainWindow.webContents.send 方法将截图数据发送给渲染进程。
在渲染进程中，我们可以监听 screenshot 事件，以接收并显示屏幕截图：
// 在渲染进程中监听截图事件
ipcRenderer.on('screenshot', (event, dataUrl) => {
const img = document.getElementById('screenshot');
img.src = dataUrl;
});
在渲染进程的 HTML 文件中，我们可以使用 <img> 元素显示屏幕截图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen Capture Example</title>
</head>
<body>
<img id="screenshot" alt="Screenshot">
<button onclick="captureScreen()">Capture Screen</button>
<script>
const { ipcRenderer } = require('electron');
// 发送请求截图的消息到主进程
function captureScreen() {
ipcRenderer.send('capture-screen');
}
</script>
</body>
</html>
这只是一个简单的示例，你可以根据应用的需求扩展和改进代码。注意，屏幕捕获可能涉及到用户隐私和安全问题，因此需要在用户明确同意的情况下使用。
转载请注明出处：http://www.zyzy.cn/article/detail/10931/Electron