electron-screenshots

基于react-screenshots的0.0.14版本修改

• 0.0.1
  • 增加delete or backSpace快捷键删除选中的框
  • 高分辨率截取图片不失真，但是效率较低

Install

Usage

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

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

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

注意

• 如果使用了 webpack 打包主进程，请在主进程 webpack 配置中修改如下配置，否则可能会出现不能调用截图窗口的情况

{
  externals: {
    'electron-screenshots': 'require("electron-screenshots")'
  }
}

• vue-cli-plugin-electron-builder配置示例vue-cli-plugin-electron-builder-issue

// vue.config.js
module.exports = {
  publicPath: '.',
  pluginOptions: {
    electronBuilder: {
      // 不打包，使用 require 加载
      externals: ['shortcut-capture']
    }
  }
}

Methods

| 名称 | 说明 | 参数 | 返回值 | | ------------ | ---------------- | ---- | ------ | | startCapture | 调用截图方法截图 | - | - | | endCapture | 手动结束截图 | - | - |

Events

• 数据类型

interface Bounds {
  x1: number
  y1: number
  x2: number
  y2: number
}

interface CaptureData {
  dataURL: string // 图片资源base64
  bounds: Bounds // 截图区域坐标信息
}

type OkData = CaptureData
type SaveData = CaptureData

| 名称 | 说明 | 回调参数 | | ------ | ------------ | ----------------------------------------- | | ok | 截图确认事件 | event:事件对象, data:OkData: 截图信息 | | cancel | 截图取消事件 | event:事件对象 | | save | 截图保存事件 | event:事件对象，data:OkData: 截图信息 |

event对象可调用preventDefault方法来阻止默认事件，例如阻止默认保存事件

const screenshots = new Screenshots()

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

screenshots.startCapture()

Screenshot