electron实现屏幕截图_electron截图功能-CSDN博客

本文链接：https://blog.csdn.net/QCIWYY/article/details/126481384

本文介绍了如何使用Electron的desktopCapturer模块获取屏幕或窗口流，并将其转换为Base64发送到渲染进程，展示了完整的截图捕获和通信过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

electron提供了获取屏幕流的功能desktopCapturer

import {desktopCapturer, screen, BrowserWindow} from 'electron';
const screenCapture = () => {
    //定义屏幕大小
    const getSize = () => {
        const { size, scaleFactor } = screen.getPrimaryDisplay();
        return {
            width: size.width * scaleFactor,
            height: size.height * scaleFactor
        }
    }

    const sizeInfo = getSize();
    desktopCapturer.getSources({
        types: ['window','screen'], // 设定需要捕获的是"屏幕"，还是"窗口"
        thumbnailSize: sizeInfo
    }).then(async sources => {
        //获取第一个屏幕
        let imageData = sources[0].thumbnail.toDataURL("image/png");
        //将base64 流发送到渲染进程 
        BrowserWindow.getFocusedWindow().webContents.send("source", imageData);
    })
}

export {
    screenCapture
}

渲染进程

    <p>
      <img  id="image" width="800" height="800" />
    </p>

import {ipcRenderer} from 'electron';
setInterval(()=>{
  //通知主进程截屏
  ipcRenderer.send('screenCapture');
},3000)
ipcRenderer.on('source',(event,image)=>{
  $('#image').attr("src",image)
  console.log(image)
})

主进程监听是否需要截图

//屏幕截图功能
ipcMain.on("screenCapture",()=>{
    screenCapture()
})