Electron desktopCapturer.getSources截取窗口

项目截图刚开始用的html2canvas，但是使用中发现截图时间太长，最终使用electron自带的desktopCapturer API来实现。

直接在vue项目中使用引入desktopCapturer，const {desktopCapturer} = require('electron'); 发现控制台报错

后来使用const {desktopCapturer} = window.require('electron'); 也报错

后来查资料得知原因是：
(1)、首先在渲染进程属于浏览器端，没有集成Node的环境，所以类似 fs 这样的Node的基础包是不可以使用。
(2)、因为没有Node环境，所以这种属于node api的require关键词是不可以使用的。
(3)、electron5.x的node集成环境默认是关闭的，这之前的版本是默认开启的

然后修改主进程文件，并且在预加载文件中引入全局的electron

main.js 主进程文件

const {app, BrowserWindow, Menu, screen} = require('electron');

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: screen.getPrimaryDisplay().workAreaSize.width,
    height: screen.getPrimaryDisplay().workAreaSize.height,
    icon: '../dist/favicon.ico',
    webPreferences: {
      //重要
      nodeIntegration: true, //是否完整的支持 node.
      enableRemoteModule: true, //来打开remote模块，使得渲染进程中可以调用主进程的方法
      contextIsolation: false,
      preload: __dirname + '/preload.js'
    }
  })
  mainWindow.loadFile(`../dist/index.html`)
} 

app.whenReady().then(() => {
  createWindow()
})

preload.js 预加载文件

global.electron = require('electron');

…/PrtSc.js 封装的截图方法

export const PrtSc = () => {
    return new Promise((resolve, c) => {
        const { desktopCapturer, remote } = window.electron;
        const screenSize = remote.screen.getPrimaryDisplay().workAreaSize;
        desktopCapturer.getSources({
            types: ['window'],
            thumbnailSize: {
                width: screenSize.width,
                height: screenSize.height,
            }
        }).then( sources =>{
            sources.map( source => {
                if(source.name.includes('平台')) {
                    return resolve(source.thumbnail.toDataURL());
                }
            })
        }).catch( error => {
            resolve('截图失败')
        });
    })
}

组件中使用

引入
import {PrtSc} from '@/util/PrtSc.js'

截图事件
handlePrtsc() { 
   PrtSc().then(res=>{
     获取到截图的base64编码
   }).catch(function (error) {
     this.$message.error("截图失败，请重试");
   });
},