#夏日生活打卡季#

最近一直捣鼓electron25整合vite4.x构建跨端桌面应用。今天给大家分享两种常用的electron截图方案。

方案一：截图dll

第一种是调用第三方提供的截图dll，通过node来只需exe文件截图。

const { join } = require('path')
const { execFile } = require('child_process')

// 调用dll截图
ipcMain.on('win-capture', () => {
    let printScr = execFile(join(__dirname, '../resource/screenShot/PrintScr.exe'))
    printScr.on('exit', (code) => {
        if(code) {
            console.log(code)
        }
    })
})

方案二：electron第三方截图插件

electron-screenshots 基于electron构建的截图工具。

安装组件

yarn add electron-screenshots
// or
npm i electron-screenshots -S

引入组件并调用截图。

const { globalShortcut } = require('electron')
const Screenshots = require('electron-screenshots').default

let screenshots = new Screenshots()
globalShortcut.register("ctrl+shift+q", () => {
    screenshots.startCapture()
})
// 点击确定按钮回调事件
screenshots.on("ok", (e, buffer, bounds) => {
    console.log("capture", buffer, bounds)
})
// 点击取消按钮回调事件
screenshots.on("cancel", () => {
    console.log("capture", "cancel1")
    if (screenshots.$win?.isFocused()) {
      screenshots.endCapture();
    }
})
screenshots.on("cancel", (e) => {
    // 执行了preventDefault
    // 点击取消不会关闭截图窗口
    e.preventDefault()
    console.log("capture", "cancel2")
})
// 点击保存按钮回调事件
screenshots.on("save", (e, buffer, bounds) => {
    console.log("capture", buffer, bounds);
})
// esc取消
globalShortcut.register("esc", () => {
    if (screenshots.$win?.isFocused()) {
      screenshots.endCapture();
    }
})

其实electron官方提供了desktop-capturer截图API，不过功能很有局限性。

OK，今天就分享到这里了。