一、前言

本篇主要介绍electron借用现有工具或系统命令实现截图功能，主要分为macOS和windows系统两方面来说。

二、实现方法

我们先创建一个js文件，用于存放截图相关的方法逻辑代码，后面windows和mac系统方法咱们下面说

// ElectronScreen.js
// 我们先创建一个监听，用于与渲染进程通信，接受截图命令
import { ipcMain } from 'electron'
let mainWin = null // 当前窗口实例
export function getScreenShots (win) {
  mainWin = win
  ipcMain.on('screenShots', () => { // 接收截图命令
    // 接收到截图后的执行程序
    if (process.platform === 'darwin') { // 若是mac
      handleScreenShots()
    } else {
      screenWindow()
    }
  })
}

之后在主进程中引入这个文件，代码如下

//background.js

import { getScreenShots } from './electron-config/ElectronScreen.js'
// win是窗口实例
getScreenShots(win)

在渲染进程调用如下

// 调用截图
shotSreen () {
  window.ipcRenderer.send('screenShots')
}
// 监听截图成功的回调
window.ipcRenderer.on('captureScreenBack', (e, args) => {
  console.log('截图来了',  args)
})

1.macOS系统实现截图

这里我们借助到mac系统自带截图工具，通过命令行去调用，代码如下

import { clipboard, ipcMain, app } from 'electron'
const { execFile, exec } = require('child_process')

// 截图方法mac
export const handleScreenShots = () => {
  // 这里咱们设置-c将截图保存到剪切板上
  exec('screencapture -i -U -c', (error, stdout, stderr) => {
    console.log('308', error, stdout, stderr)
    // 从剪切板上取到图片
    const pngs = clipboard.readImage().toPNG()
    const imgs = 'data:image/png;base64,' + pngs.toString('base64')
    // mainWin是窗口实例，这里是将图片传给渲染进程
    mainWin.webContents.send('captureScreenBack', imgs)
  })
}

以下是详细的命令行选项

1. -c 强制截图保存到剪贴板而不是文件中
2. -C 截图时保留光标（只在非交互模式下有效）
3. -d display errors to the user graphically（不知道啥意思）
4. -i 交互模式截取屏幕。可以是选区或者是窗口。
5. control key - 截图保存到剪贴板
6. space key - 在鼠标选区模式和窗口模式间切换
7. escape key - 退出截图
8. -m 只截取主显示器（-i模式下无效）
9. -M 截图完毕后，会打开邮件客户端，图片就躺在邮件正文中
10. -o 在窗口模式下，不截取窗口的阴影
11. -P 截图完毕后，在图片预览中打开
12. -s 只允许鼠标选择模式
13. -S 窗口模式下，截取屏幕而不是窗口
14. -t format 指定图片格式，模式是png。可选的有pdf, jpg, tiff等
15. -T seconds 延时截取，默认为5秒。
16. -w 只允许窗口截取模式
17. -W 开始交互截取模式，默认为窗口模式（只是默认模式与-i不同）
18. -x 不播放声效
19. -a do not include windows attached to selected windows（不懂）
20. -r 不向图片中加入dpi信息
21. -l windowid 抓取指定windowid的窗口截图
22. -R x,y,w,h 抓取指定区域的截图
23. -B bundleid 截图输出会被bundleid指出的程序打开

弄好之后，我们尝试截图试下，效果如图

并且也在渲染进程得到图片数据，如图

2.windows系统实现截图

这里我们还是要取巧，可以通过调用腾讯的截图功能，实现截图。就是如下这两个文件

点击获取截图工具文件地址 密码: mcw2

代码如下

import { clipboard, ipcMain } from 'electron'
const { execFile, exec } = require('child_process')
const path = require('path')
// 截图方法windows
export const screenWindow = () => {
  let url = path.resolve(__static, 'PrintScr.exe')
  const screen_window = execFile(url)
  screen_window.on('exit', (code) => {
    if (code) {
      const pngs = clipboard.readImage().toPNG()
      const imgs = 'data:image/png;base64,' + pngs.toString('base64')
      mainWin.webContents.send('captureScreenBack', imgs)
    }
  })
}

效果如下图所示

返回值也同上面mac的一样。

这样我们就快速地实现了electron应用的截图功能。

完整代码如下

import { clipboard, ipcMain } from 'electron'
const { execFile, exec } = require('child_process')
const path = require('path')
let mainWin = null

// 截图方法windows
export const screenWindow = () => {
  // eslint-disable-next-line no-undef
  let url = path.resolve(__static, 'PrintScr.exe')
  const screen_window = execFile(url)
  screen_window.on('exit', (code) => {
    // win.restore();
    if (code) {
      const pngs = clipboard.readImage().toPNG()
      const imgs = 'data:image/png;base64,' + pngs.toString('base64')
      mainWin.webContents.send('captureScreenBack', imgs)
    }
  })
}

// 截图方法mac
export const handleScreenShots = () => {
  exec('screencapture -i -U -c', (error, stdout, stderr) => {
    console.log('308', error, stdout, stderr)
    const pngs = clipboard.readImage().toPNG()
    const imgs = 'data:image/png;base64,' + pngs.toString('base64')
    mainWin.webContents.send('captureScreenBack', imgs)
  })
}

export function getScreenShots (win) {
  mainWin = win
  // 接收截图命令
  ipcMain.on('screenShots', () => {
    // 接收到截图后的执行程序
    if (process.platform === 'darwin') {
      handleScreenShots()
    } else {
      screenWindow()
    }
  })
}

三、后记

我们也可以结合electron的desktopCapturer模块来自己做一个截图功能。本篇中介绍的方式，是为了快速实现。

本篇完结！ 撒花！ 感谢观看！ 希望能帮助到你！