专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

浅析Electron常用截图方案

ins518 2024-11-23 16:43:55 技术文章 9 ℃ 0 评论

#夏日生活打卡季#

最近一直捣鼓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,今天就分享到这里了。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表