electron-screenshots-tool

electron 截图插件

Usage

import { app, globalShortcut } from 'electron'
import Screenshots from './screenshots'

app.whenReady().then(() => {
  const screenshots = new Screenshots()
  globalShortcut.register('ctrl+shift+a', () => {
    screenshots.startCapture()
    screenshots.view.webContents.openDevTools()
  })
  // 点击确定按钮回调事件
  screenshots.on('ok', (e, buffer, bounds) => {
    console.log('capture', buffer, bounds)
  })
  // 点击取消按钮回调事件
  screenshots.on('cancel', () => {
    console.log('capture', 'cancel1')
  })
  screenshots.on('cancel', (e) => {
    // 执行了preventDefault
    // 点击取消不会关闭截图窗口
    e.preventDefault()
    console.log('capture', 'cancel2')
  })
  // 点击保存按钮回调事件
  screenshots.on('save', (e, buffer, bounds) => {
    console.log('capture', buffer, bounds)
  })
  debug({ showDevTools: true, devToolsMode: 'undocked' })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

• 加速截图界面展示，不销毁BrowserWindow，减少创建窗口的开销，可用以下代码实现。需注意，启用该功能，会导致window-all-closed事件不触发，因此需要手动关闭截图窗口

// 是否复用截图窗口，加快截图窗口显示，默认值为 false
// 如果设置为 true 则会在第一次调用截图窗口时创建，后续调用时直接使用
// 且由于窗口不会 close，所以不会触发 app 的 `window-all-closed` 事件
const screenshots = new Screenshots({
  singleWindow: true
})

Methods

• Debugger类型产考debug中的Debugger类型

export type LoggerFn = (...args: unknown[]) => void
export type Logger = Debugger | LoggerFn

export interface Lang {
  magnifierPositionLabel?: string
  operationOkTitle?: string
  operationCancelTitle?: string
  operationSaveTitle?: string
  operationRedoTitle?: string
  operationUndoTitle?: string
  operationMosaicTitle?: string
  operationTextTitle?: string
  operationBrushTitle?: string
  operationArrowTitle?: string
  operationEllipseTitle?: string
  operationRectangleTitle?: string
}

export interface ScreenshotsOpts {
  lang?: Lang
  // 调用日志，默认值为 debug('electron-screenshots')
  // debug https://www.npmjs.com/package/debug
  logger?: Logger
  // 是否复用截图窗口，加快截图窗口显示，默认值为 false
  // 如果设置为 true 则会在第一次调用截图窗口时创建，后续调用时直接使用
  // 且由于窗口不会 close，所以不会触发 app 的 `window-all-closed` 事件
  singleWindow?: boolean
}

| 名称 | 说明 | 返回值 | | ------------------------------------------------- | ---------------- | ------ | | constructor(opts: ScreenshotsOpts): Screenshots | 调用截图方法截图 | - | | startCapture(): Promise<void> | 调用截图方法截图 | - | | endCapture(): Promise<void> | 手动结束截图 | - | | setLang(lang: Lang): Promise<void> | 修改语言 | - |

Events

• 数据类型

interface Bounds {
  x: number
  y: number
  width: number
  height: number
}

export interface Display {
  id: number
  x: number
  y: number
  width: number
  height: number
}

export interface ScreenshotsData {
  bounds: Bounds
  display: Display
}

class Event {
  public defaultPrevented = false

  public preventDefault(): void {
    this.defaultPrevented = true
  }
}

| 名称 | 说明 | 回调参数 | | ------ | ------------ | --------------------------------------------------------------- | | ok | 截图确认事件 | (event: Event, buffer: Buffer, data: ScreenshotsData) => void | | cancel | 截图取消事件 | (event: Event) => void | | save | 截图保存事件 | (event: Event, buffer: Buffer, data: ScreenshotsData) => void |

说明

• event: 事件对象
• buffer: png 图片 buffer
• bounds: 截图区域信息
• display: 截图的屏幕
• event对象可调用preventDefault方法来阻止默认事件，例如阻止默认保存事件

const screenshots = new Screenshots({
  lang: {
    magnifierPositionLabel: 'Position',
    operationOkTitle: 'Ok',
    operationCancelTitle: 'Cancel',
    operationSaveTitle: 'Save',
    operationRedoTitle: 'Redo',
    operationUndoTitle: 'Undo',
    operationMosaicTitle: 'Mosaic',
    operationTextTitle: 'Text',
    operationBrushTitle: 'Brush',
    operationArrowTitle: 'Arrow',
    operationEllipseTitle: 'Ellipse',
    operationRectangleTitle: 'Rectangle'
  }
})

screenshots.on('save', (e, buffer, data) => {
  // 阻止插件自带的保存功能
  // 用户自己控制保存功能
  e.preventDefault()
  // 用户可在这里自己定义保存功能
  console.log('capture', buffer, data)
})

screenshots.startCapture()