Electron desktopCapturer.getSources截取窗口

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

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

然后修改主进程文件，并且在预加载文件中引入全局的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=>{
     获取到截图的base编码
   }).catch(function (error) {
     this.$message.error("截图失败，请重试");
   });
},