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()