{"_id":"@aderra/electron-screenshot","name":"@aderra/electron-screenshot","dist-tags":{"latest":"6.6.1"},"versions":{"6.6.1":{"name":"@aderra/electron-screenshot","version":"6.6.1","description":"electron 截图插件","types":"lib/index.d.ts","main":"lib/index.cjs.js","module":"lib/index.js","scripts":{"prepublishOnly":"npm run build","start":"cross-env DEBUG=electron-screenshots electron lib/demo.js","dev":"tsc --sourceMap --watch","build":"npm run clean && tsc --skipLibCheck --declaration","lint":"eslint . --ext .js,.ts --fix","clean":"rimraf lib"},"repository":{"type":"git","url":"git+https://github.com/decrystal/aderra-electron-screenshot.git"},"keywords":["electron","shortcut","screenshot","cropper"],"author":{"name":"nashaofu"},"license":"MIT","bugs":{"url":"https://github.com/decrystal/aderra-electron-screenshot/issues"},"homepage":"https://github.com/decrystal/aderra-electron-screenshot#readme","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"dependencies":{"debug":"^4.3.4","fs-extra":"^11.1.1","node-screenshots":"^0.2.1","react-screenshots":"^0.5.22"},"peerDependencies":{"electron":">=14"},"devDependencies":{"@types/debug":"^4.1.7","@types/fs-extra":"^11.0.1","@types/node":"^18.15.11","@typescript-eslint/eslint-plugin":"^5.57.0","@typescript-eslint/parser":"^5.57.0","cross-env":"^7.0.3","electron":"^23.2.0","eslint":"^8.37.0","eslint-config-airbnb-base":"^15.0.0","eslint-config-airbnb-typescript":"^17.0.0","eslint-plugin-import":"^2.27.5","rimraf":"^4.4.1","typescript":"^5.0.2"},"_id":"@aderra/electron-screenshot@6.6.1","gitHead":"e5529b43d0f4e105602b9c06390b25f88f9889dc","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-wOo1xmAWAWzVCaakyHrsltonlz2eIwToK6MtryTPhHD4yY9QJQcPmybv23um3Bl+RTRuVwIQ1nuYwZm/5dcMag==","shasum":"082b207eec2be7c87ad512014688b1a6c37ed83e","tarball":"https://registry.npmjs.org/@aderra/electron-screenshot/-/electron-screenshot-6.6.1.tgz","fileCount":17,"unpackedSize":48206,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIH6Huc1PFDTj3NhVTHpmTgVnteohhfS7+ssHkbTNAJq0AiEArMOY5Sml0I4Bj5/bsMXb9sexIRbFg1tYdscE8gmid7Y="}]},"_npmUser":{"name":"decrystal","email":"2399274254@qq.com"},"directories":{},"maintainers":[{"name":"decrystal","email":"2399274254@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/electron-screenshot_6.6.1_1784541946269_0.8536874833706511"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-20T10:05:46.105Z","6.6.1":"2026-07-20T10:05:46.396Z","modified":"2026-07-20T10:05:46.643Z"},"maintainers":[{"name":"decrystal","email":"2399274254@qq.com"}],"description":"electron 截图插件","homepage":"https://github.com/decrystal/aderra-electron-screenshot#readme","keywords":["electron","shortcut","screenshot","cropper"],"repository":{"type":"git","url":"git+https://github.com/decrystal/aderra-electron-screenshot.git"},"author":{"name":"nashaofu"},"bugs":{"url":"https://github.com/decrystal/aderra-electron-screenshot/issues"},"license":"MIT","readme":"# @aderra/electron-screenshot\n\n> electron 截图插件\n\n## 致谢与来源\n\n本项目基于 [nashaofu/screenshots](https://github.com/nashaofu/screenshots) 中的\n`electron-screenshots` 包开发，感谢原作者 [nashaofu](https://github.com/nashaofu)\n及所有贡献者的开源工作。原项目与本项目均采用 [MIT License](./LICENSE)。\n\n## Prerequisites\n\n- electron >= 11\n\n## Install\n\n```bash\nnpm install @aderra/electron-screenshot\n```\n\n## Usage\n\n```ts\nimport debug from \"electron-debug\";\nimport { app, globalShortcut } from \"electron\";\nimport Screenshots from \"@aderra/electron-screenshot\";\n\napp.whenReady().then(() => {\n  app.setAppUserModelId('com.electron.screenshots')\n  const screenshots = new Screenshots();\n  globalShortcut.register(\"ctrl+shift+a\", () => {\n    screenshots.startCapture();\n    screenshots.$view.webContents.openDevTools();\n  });\n  // 点击确定按钮回调事件\n  screenshots.on(\"ok\", (e, buffer, bounds) => {\n    console.log(\"capture\", buffer, bounds);\n  });\n  // 点击取消按钮回调事件\n  screenshots.on(\"cancel\", () => {\n    console.log(\"capture\", \"cancel1\");\n  });\n  screenshots.on(\"cancel\", (e) => {\n    // 执行了preventDefault\n    // 点击取消不会关闭截图窗口\n    e.preventDefault();\n    console.log(\"capture\", \"cancel2\");\n  });\n  // 点击保存按钮回调事件\n  screenshots.on(\"save\", (e, buffer, bounds) => {\n    console.log(\"capture\", buffer, bounds);\n  });\n  // 保存后的回调事件\n  screenshots.on(\"afterSave\", (e, buffer, bounds, isSaved) => {\n    console.log(\"capture\", buffer, bounds);\n    console.log(\"isSaved\", isSaved); // 是否保存成功\n  });\n  debug({ showDevTools: true, devToolsMode: \"undocked\" });\n});\n\napp.on(\"window-all-closed\", () => {\n  if (process.platform !== \"darwin\") {\n    app.quit();\n  }\n});\n```\n\n### 注意\n\n- 如果使用了 webpack 打包主进程，请在主进程 webpack 配置中修改如下配置，否则可能会出现不能调用截图窗口的情况\n\n```js\n{\n  externals: {\n    '@aderra/electron-screenshot': 'require(\"@aderra/electron-screenshot\")'\n  }\n}\n```\n\n- `vue-cli-plugin-electron-builder`配置示例[vue-cli-plugin-electron-builder-issue](https://github.com/nashaofu/vue-cli-plugin-electron-builder-issue/blob/0f774a90b09e10b02f86fcb6b50645058fe1a4e8/vue.config.js#L1-L8)\n\n```js\n// vue.config.js\nmodule.exports = {\n  publicPath: \".\",\n  pluginOptions: {\n    electronBuilder: {\n      // 不打包，使用 require 加载\n      externals: [\"@aderra/electron-screenshot\"],\n    },\n  },\n};\n```\n\n- vite 配置示例：\n\n```js\n// vite.config.js\nimport { defineConfig } from \"vite\";\nimport viteExternals from \"vite-plugin-externals\";\n\nexport default defineConfig({\n  plugins: [\n    viteExternals({\n      \"@aderra/electron-screenshot\": 'require(\"@aderra/electron-screenshot\")', // 模块名称: 全局变量\n    }),\n  ],\n});\n```\n\n- esc 取消截图，可用以下代码实现按 esc 取消截图\n\n```js\nglobalShortcut.register(\"esc\", () => {\n  if (screenshots.$win?.isFocused()) {\n    screenshots.endCapture();\n  }\n});\n```\n\n- 加速截图界面展示，不销毁`BrowserWindow`，减少创建窗口的开销，可用以下代码实现。**需注意，启用该功能，会导致`window-all-closed`事件不触发，因此需要手动关闭截图窗口**\n\n```js\n// 是否复用截图窗口，加快截图窗口显示，默认值为 false\n// 如果设置为 true 则会在第一次调用截图窗口时创建，后续调用时直接使用\n// 且由于窗口不会 close，所以不会触发 app 的 `window-all-closed` 事件\nconst screenshots = new Screenshots({\n  singleWindow: true,\n});\n```\n\n## Methods\n\n- `Debugger`类型产考[debug](https://github.com/debug-js/debug)中的`Debugger`类型\n\n```ts\nexport type LoggerFn = (...args: unknown[]) => void;\nexport type Logger = Debugger | LoggerFn;\n\nexport interface Lang {\n  magnifier_position_label?: string;\n  operation_ok_title?: string;\n  operation_cancel_title?: string;\n  operation_save_title?: string;\n  operation_redo_title?: string;\n  operation_undo_title?: string;\n  operation_mosaic_title?: string;\n  operation_text_title?: string;\n  operation_brush_title?: string;\n  operation_arrow_title?: string;\n  operation_ellipse_title?: string;\n  operation_rectangle_title?: string;\n}\n\nexport interface ScreenshotsOpts {\n  lang?: Lang;\n  // 调用日志，默认值为 debug('electron-screenshots')\n  // debug https://www.npmjs.com/package/debug\n  logger?: Logger;\n  // 是否复用截图窗口，加快截图窗口显示，默认值为 false\n  // 如果设置为 true 则会在第一次调用截图窗口时创建，后续调用时直接使用\n  // 且由于窗口不会 close，所以不会触发 app 的 `window-all-closed` 事件\n  singleWindow?: boolean;\n}\n```\n\n| 名称                                              | 说明             | 返回值 |\n| ------------------------------------------------- | ---------------- | ------ |\n| `constructor(opts: ScreenshotsOpts): Screenshots` | 调用截图方法截图 | -      |\n| `startCapture(): Promise<void>`                   | 调用截图方法截图 | -      |\n| `endCapture(): Promise<void>`                     | 手动结束截图     | -      |\n| `setLang(lang: Lang): Promise<void>`              | 修改语言         | -      |\n\n## Events\n\n- 数据类型\n\n```ts\ninterface Bounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport interface Display {\n  id: number;\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport interface ScreenshotsData {\n  bounds: Bounds;\n  display: Display;\n}\n\nclass Event {\n  public defaultPrevented = false;\n\n  public preventDefault(): void {\n    this.defaultPrevented = true;\n  }\n}\n```\n\n| 名称          | 说明                                                        | 回调参数                                                                          |\n| ------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------- |\n| ok            | 截图确认事件                                                | `(event: Event, buffer: Buffer, data: ScreenshotsData) => void`                   |\n| cancel        | 截图取消事件                                                | `(event: Event) => void`                                                          |\n| save          | 截图保存事件                                                | `(event: Event, buffer: Buffer, data: ScreenshotsData) => void`                   |\n| afterSave     | 截图保存（取消保存）后的事件                                | `(event: Event, buffer: Buffer, data: ScreenshotsData, isSaved: boolean) => void` |\n| windowCreated | 截图窗口被创建后触发                                        | `($win: BrowserWindow) => void`                                                   |\n| windowClosed  | 截图窗口被关闭后触发，对`BrowserWindow` `closed` 事件的转发 | `($win: BrowserWindow) => void`                                                   |\n\n### 说明\n\n- event: 事件对象\n- buffer: png 图片 buffer\n- bounds: 截图区域信息\n- display: 截图的屏幕\n- `event`对象可调用`preventDefault`方法来阻止默认事件，例如阻止默认保存事件\n\n```ts\nconst screenshots = new Screenshots({\n  lang: {\n    magnifier_position_label: \"Position\",\n    operation_ok_title: \"Ok\",\n    operation_cancel_title: \"Cancel\",\n    operation_save_title: \"Save\",\n    operation_redo_title: \"Redo\",\n    operation_undo_title: \"Undo\",\n    operation_mosaic_title: \"Mosaic\",\n    operation_text_title: \"Text\",\n    operation_brush_title: \"Brush\",\n    operation_arrow_title: \"Arrow\",\n    operation_ellipse_title: \"Ellipse\",\n    operation_rectangle_title: \"Rectangle\",\n  },\n});\n\nscreenshots.on(\"save\", (e, buffer, data) => {\n  // 阻止插件自带的保存功能\n  // 用户自己控制保存功能\n  e.preventDefault();\n  // 用户可在这里自己定义保存功能\n  console.log(\"capture\", buffer, data);\n});\n\nscreenshots.startCapture();\n```\n\n## Screenshot\n\n![screenshot](https://raw.githubusercontent.com/nashaofu/screenshots/master/screenshot.jpg)\n","readmeFilename":"README.md","_rev":"1-75ec63851a5dc4038374ec3ababe0f63"}