7. 其他的一些操作

刘圣凯
231 阅读2分钟

关于 electron 的一些其他的操作

快捷键 globalShortcut

globalShortcut 模块可以在操作系统中注册/注销全局快捷键, 以便可以为操作定制各种快捷键。

注意: 快捷方式是全局的; 即使应用程序没有键盘焦点, 它也仍然在持续监听键盘事件。 在 app 模块的 ready 事件就绪之前，这个模块不能使用。

注册快捷键使用示例：

globalShortcut.register('Ctrl+g', () => {
  console.log('gggggg')
})

此时按下Ctrl + g 即可看到log此时我们就能看到bash打印出了gggggg。但是这时由于这个事件是个全局的事件， 所以我们可以这样处理，在窗口被选中时注册这个事件，在窗口失焦时注销这个事件，那么就可以处理全局的问题了

注销快捷键示例：

// 注销快捷键
globalShortcut.unregister('Ctrl+X')

// 注销所有快捷键
globalShortcut.unregisterAll()

菜单 Menu

Menu 这个类的作用就是创建原生应用菜单和上下文菜单，我们正常窗口的顶部是自带一个菜单的，我们可以通过 Menu 这个类去修改才菜单，具体使用可以点击查看 使用文档 ，这里我们简单介绍一下，首先我们新建一个mainMenu.js作为菜单模板：

const menuTemplate = [  {    label: '文件',    submenu: [      {        label: '新建',        accelerator: 'CmdOrCtrl+N',        click: () => {          console.log('new file')        },      },    ],
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '复制',
        accelerator: 'CmdOrCtrl+C',
        selector: 'copy:',
      },
      {
        label: '粘贴',
        accelerator: 'CmdOrCtrl+V',
        selector: 'paste:',
      },
    ],
  },
]

module.exports = menuTemplate

接着我们就可以在main.js中直接使用了

const menuTemplate = require('./mainMenu')

const menu = Menu.buildFromTemplate(menuTemplate)
Menu.setApplicationMenu(menu)

剪切板 clipboard

剪切板大家应该很熟悉了， 在系统剪贴板上执行复制和粘贴操作。支持读写

const { clipboard } = require('electron')

clipboard.writeText('Example string', 'selection')
console.log(clipboard.readText('selection'))

抓取屏幕 desktopCapturer

Electron中的desktopCapturer模块可以获取用户桌面或应用窗口的图像,常见的用途就是截屏。

desktopCapturer提供的主要API如下:

  • desktopCapturer.getSources(options) - 获取可用的屏幕或窗口源,返回Source[]
  • Source - 源信息对象,包含id、name、thumbnail等信息
  • navigator.webkitGetUserMedia - 获取被选源的实时流

常见的用法示例:

  1. 获取屏幕和窗口源

    const sources = await desktopCapturer.getSources({ types: ['screen', 'window'] })

  2. 选择一个源并获取流

    const stream = await navigator.webkitGetUserMedia({ audio: false, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: sources[0].id } } })

  3. 将流拷贝成图片即实现截屏

    const buffer = stream.getVideoTracks()[0].getPhoto() // 设置图片编码

    fs.writeFile('screenshot.png', buffer, ...) // 保存图片

所以通过desktopCapturer,可以实现选择屏幕区域进行截图、录屏、实现屏幕共享等功能。它提供了对桌面图像源的访问

avatar
文章
阅读
粉丝