electron-screenshots 0.5.21 → 0.5.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +231 -223
  3. package/lib/index.js +12 -0
  4. package/lib/screenshots.js +8 -1
  5. package/package.json +3 -3
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2019 nashaofu
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2019 nashaofu
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,223 +1,231 @@
1
- # electron-screenshots
2
-
3
- > electron 截图插件
4
-
5
- ## Prerequisites
6
-
7
- - electron >= 11
8
-
9
- ## Install
10
-
11
- [![NPM](https://nodei.co/npm/electron-screenshots.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/electron-screenshots/)
12
-
13
- ## Usage
14
-
15
- ```ts
16
- import debug from 'electron-debug'
17
- import { app, globalShortcut } from 'electron'
18
- import Screenshots from './screenshots'
19
-
20
- app.whenReady().then(() => {
21
- const screenshots = new Screenshots()
22
- globalShortcut.register('ctrl+shift+a', () => {
23
- screenshots.startCapture()
24
- screenshots.$view.webContents.openDevTools()
25
- })
26
- // 点击确定按钮回调事件
27
- screenshots.on('ok', (e, buffer, bounds) => {
28
- console.log('capture', buffer, bounds)
29
- })
30
- // 点击取消按钮回调事件
31
- screenshots.on('cancel', () => {
32
- console.log('capture', 'cancel1')
33
- })
34
- screenshots.on('cancel', e => {
35
- // 执行了preventDefault
36
- // 点击取消不会关闭截图窗口
37
- e.preventDefault()
38
- console.log('capture', 'cancel2')
39
- })
40
- // 点击保存按钮回调事件
41
- screenshots.on('save', (e, buffer, bounds) => {
42
- console.log('capture', buffer, bounds)
43
- })
44
- debug({ showDevTools: true, devToolsMode: 'undocked' })
45
- })
46
-
47
- app.on('window-all-closed', () => {
48
- if (process.platform !== 'darwin') {
49
- app.quit()
50
- }
51
- })
52
- ```
53
-
54
- ### 注意
55
-
56
- - 如果使用了 webpack 打包主进程，请在主进程 webpack 配置中修改如下配置，否则可能会出现不能调用截图窗口的情况
57
-
58
- ```js
59
- {
60
- externals: {
61
- 'electron-screenshots': 'require("electron-screenshots")'
62
- }
63
- }
64
- ```
65
-
66
- - `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)
67
-
68
- ```js
69
- // vue.config.js
70
- module.exports = {
71
- publicPath: '.',
72
- pluginOptions: {
73
- electronBuilder: {
74
- // 不打包，使用 require 加载
75
- externals: ['electron-screenshots']
76
- }
77
- }
78
- }
79
- ```
80
-
81
- - esc 取消截图，可用以下代码实现按 esc 取消截图
82
-
83
- ```js
84
- globalShortcut.register('esc', () => {
85
- if (screenshots.$win?.isFocused()) {
86
- screenshots.endCapture()
87
- }
88
- })
89
- ```
90
-
91
- - 加速截图界面展示，不销毁`BrowserWindow`，减少创建窗口的开销，可用以下代码实现。**需注意，启用该功能，会导致`window-all-closed`事件不触发，因此需要手动关闭截图窗口**
92
-
93
- ```js
94
- // 是否复用截图窗口，加快截图窗口显示，默认值为 false
95
- // 如果设置为 true 则会在第一次调用截图窗口时创建，后续调用时直接使用
96
- // 且由于窗口不会 close，所以不会触发 app 的 `window-all-closed` 事件
97
- const screenshots = new Screenshots({
98
- singleWindow: true
99
- })
100
- ```
101
-
102
- ## Methods
103
-
104
- - `Debugger`类型产考`debug`中的`Debugger`类型
105
-
106
- ```ts
107
- export type LoggerFn = (...args: unknown[]) => void
108
- export type Logger = Debugger | LoggerFn
109
-
110
- export interface Lang {
111
- magnifier_position_label?: string
112
- operation_ok_title?: string
113
- operation_cancel_title?: string
114
- operation_save_title?: string
115
- operation_redo_title?: string
116
- operation_undo_title?: string
117
- operation_mosaic_title?: string
118
- operation_text_title?: string
119
- operation_brush_title?: string
120
- operation_arrow_title?: string
121
- operation_ellipse_title?: string
122
- operation_rectangle_title?: string
123
- }
124
-
125
- export interface ScreenshotsOpts {
126
- lang?: Lang
127
- // 调用日志，默认值为 debug('electron-screenshots')
128
- // debug https://www.npmjs.com/package/debug
129
- logger?: Logger
130
- // 是否复用截图窗口，加快截图窗口显示，默认值为 false
131
- // 如果设置为 true 则会在第一次调用截图窗口时创建，后续调用时直接使用
132
- // 且由于窗口不会 close，所以不会触发 app 的 `window-all-closed` 事件
133
- singleWindow?: boolean
134
- }
135
- ```
136
-
137
- | 名称 | 说明 | 返回值 |
138
- | ------------------------------------------------- | ---------------- | ------ |
139
- | `constructor(opts: ScreenshotsOpts): Screenshots` | 调用截图方法截图 | - |
140
- | `startCapture(): Promise<void>` | 调用截图方法截图 | - |
141
- | `endCapture(): Promise<void>` | 手动结束截图 | - |
142
- | `setLang(lang: Lang): Promise<void>` | 修改语言 | - |
143
-
144
- ## Events
145
-
146
- - 数据类型
147
-
148
- ```ts
149
- interface Bounds {
150
- x: number
151
- y: number
152
- width: number
153
- height: number
154
- }
155
-
156
- export interface Display {
157
- id: number
158
- x: number
159
- y: number
160
- width: number
161
- height: number
162
- }
163
-
164
- export interface ScreenshotsData {
165
- bounds: Bounds
166
- display: Display
167
- }
168
-
169
- class Event {
170
- public defaultPrevented = false
171
-
172
- public preventDefault(): void {
173
- this.defaultPrevented = true
174
- }
175
- }
176
- ```
177
-
178
- | 名称 | 说明 | 回调参数 |
179
- | ------ | ------------ | --------------------------------------------------------------- |
180
- | ok | 截图确认事件 | `(event: Event, buffer: Buffer, data: ScreenshotsData) => void` |
181
- | cancel | 截图取消事件 | `(event: Event) => void` |
182
- | save | 截图保存事件 | `(event: Event, buffer: Buffer, data: ScreenshotsData) => void` |
183
-
184
- ### 说明
185
-
186
- - event: 事件对象
187
- - buffer: png 图片 buffer
188
- - bounds: 截图区域信息
189
- - display: 截图的屏幕
190
- - `event`对象可调用`preventDefault`方法来阻止默认事件，例如阻止默认保存事件
191
-
192
- ```ts
193
- const screenshots = new Screenshots({
194
- lang: {
195
- magnifier_position_label: 'Position',
196
- operation_ok_title: 'Ok',
197
- operation_cancel_title: 'Cancel',
198
- operation_save_title: 'Save',
199
- operation_redo_title: 'Redo',
200
- operation_undo_title: 'Undo',
201
- operation_mosaic_title: 'Mosaic',
202
- operation_text_title: 'Text',
203
- operation_brush_title: 'Brush',
204
- operation_arrow_title: 'Arrow',
205
- operation_ellipse_title: 'Ellipse',
206
- operation_rectangle_title: 'Rectangle'
207
- }
208
- })
209
-
210
- screenshots.on('save', (e, buffer, data) => {
211
- // 阻止插件自带的保存功能
212
- // 用户自己控制保存功能
213
- e.preventDefault()
214
- // 用户可在这里自己定义保存功能
215
- console.log('capture', buffer, data)
216
- })
217
-
218
- screenshots.startCapture()
219
- ```
220
-
221
- ## Screenshot
222
-
223
- ![screenshot](../../screenshot.jpg)
1
+ # electron-screenshots
2
+
3
+ > electron 截图插件
4
+
5
+ ## Prerequisites
6
+
7
+ - electron >= 11
8
+
9
+ ## Install
10
+
11
+ [![NPM](https://nodei.co/npm/electron-screenshots.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/electron-screenshots/)
12
+
13
+ ## Usage
14
+
15
+ ```ts
16
+ import debug from "electron-debug";
17
+ import { app, globalShortcut } from "electron";
18
+ import Screenshots from "./screenshots";
19
+
20
+ app.whenReady().then(() => {
21
+ const screenshots = new Screenshots();
22
+ globalShortcut.register("ctrl+shift+a", () => {
23
+ screenshots.startCapture();
24
+ screenshots.$view.webContents.openDevTools();
25
+ });
26
+ // 点击确定按钮回调事件
27
+ screenshots.on("ok", (e, buffer, bounds) => {
28
+ console.log("capture", buffer, bounds);
29
+ });
30
+ // 点击取消按钮回调事件
31
+ screenshots.on("cancel", () => {
32
+ console.log("capture", "cancel1");
33
+ });
34
+ screenshots.on("cancel", (e) => {
35
+ // 执行了preventDefault
36
+ // 点击取消不会关闭截图窗口
37
+ e.preventDefault();
38
+ console.log("capture", "cancel2");
39
+ });
40
+ // 点击保存按钮回调事件
41
+ screenshots.on("save", (e, buffer, bounds) => {
42
+ console.log("capture", buffer, bounds);
43
+ });
44
+ // 保存后的回调事件
45
+ screenshots.on("afterSave", (e, buffer, bounds, isSaved) => {
46
+ console.log("capture", buffer, bounds);
47
+ console.log("isSaved", isSaved) // 是否保存成功
48
+ });
49
+ debug({ showDevTools: true, devToolsMode: "undocked" });
50
+ });
51
+
52
+ app.on("window-all-closed", () => {
53
+ if (process.platform !== "darwin") {
54
+ app.quit();
55
+ }
56
+ });
57
+ ```
58
+
59
+ ### 注意
60
+
61
+ - 如果使用了 webpack 打包主进程，请在主进程 webpack 配置中修改如下配置，否则可能会出现不能调用截图窗口的情况
62
+
63
+ ```js
64
+ {
65
+ externals: {
66
+ 'electron-screenshots': 'require("electron-screenshots")'
67
+ }
68
+ }
69
+ ```
70
+
71
+ - `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)
72
+
73
+ ```js
74
+ // vue.config.js
75
+ module.exports = {
76
+ publicPath: ".",
77
+ pluginOptions: {
78
+ electronBuilder: {
79
+ // 不打包，使用 require 加载
80
+ externals: ["electron-screenshots"],
81
+ },
82
+ },
83
+ };
84
+ ```
85
+
86
+ - esc 取消截图，可用以下代码实现按 esc 取消截图
87
+
88
+ ```js
89
+ globalShortcut.register("esc", () => {
90
+ if (screenshots.$win?.isFocused()) {
91
+ screenshots.endCapture();
92
+ }
93
+ });
94
+ ```
95
+
96
+ - 加速截图界面展示，不销毁`BrowserWindow`，减少创建窗口的开销，可用以下代码实现。**需注意，启用该功能，会导致`window-all-closed`事件不触发，因此需要手动关闭截图窗口**
97
+
98
+ ```js
99
+ // 是否复用截图窗口，加快截图窗口显示，默认值为 false
100
+ // 如果设置为 true 则会在第一次调用截图窗口时创建，后续调用时直接使用
101
+ // 且由于窗口不会 close，所以不会触发 app 的 `window-all-closed` 事件
102
+ const screenshots = new Screenshots({
103
+ singleWindow: true,
104
+ });
105
+ ```
106
+
107
+ ## Methods
108
+
109
+ - `Debugger`类型产考[debug](https://github.com/debug-js/debug)中的`Debugger`类型
110
+
111
+ ```ts
112
+ export type LoggerFn = (...args: unknown[]) => void;
113
+ export type Logger = Debugger | LoggerFn;
114
+
115
+ export interface Lang {
116
+ magnifier_position_label?: string;
117
+ operation_ok_title?: string;
118
+ operation_cancel_title?: string;
119
+ operation_save_title?: string;
120
+ operation_redo_title?: string;
121
+ operation_undo_title?: string;
122
+ operation_mosaic_title?: string;
123
+ operation_text_title?: string;
124
+ operation_brush_title?: string;
125
+ operation_arrow_title?: string;
126
+ operation_ellipse_title?: string;
127
+ operation_rectangle_title?: string;
128
+ }
129
+
130
+ export interface ScreenshotsOpts {
131
+ lang?: Lang;
132
+ // 调用日志，默认值为 debug('electron-screenshots')
133
+ // debug https://www.npmjs.com/package/debug
134
+ logger?: Logger;
135
+ // 是否复用截图窗口，加快截图窗口显示，默认值为 false
136
+ // 如果设置为 true 则会在第一次调用截图窗口时创建，后续调用时直接使用
137
+ // 且由于窗口不会 close，所以不会触发 app 的 `window-all-closed` 事件
138
+ singleWindow?: boolean;
139
+ }
140
+ ```
141
+
142
+ | 名称 | 说明 | 返回值 |
143
+ | ------------------------------------------------- | ---------------- | ------ |
144
+ | `constructor(opts: ScreenshotsOpts): Screenshots` | 调用截图方法截图 | - |
145
+ | `startCapture(): Promise<void>` | 调用截图方法截图 | - |
146
+ | `endCapture(): Promise<void>` | 手动结束截图 | - |
147
+ | `setLang(lang: Lang): Promise<void>` | 修改语言 | - |
148
+
149
+ ## Events
150
+
151
+ - 数据类型
152
+
153
+ ```ts
154
+ interface Bounds {
155
+ x: number;
156
+ y: number;
157
+ width: number;
158
+ height: number;
159
+ }
160
+
161
+ export interface Display {
162
+ id: number;
163
+ x: number;
164
+ y: number;
165
+ width: number;
166
+ height: number;
167
+ }
168
+
169
+ export interface ScreenshotsData {
170
+ bounds: Bounds;
171
+ display: Display;
172
+ }
173
+
174
+ class Event {
175
+ public defaultPrevented = false;
176
+
177
+ public preventDefault(): void {
178
+ this.defaultPrevented = true;
179
+ }
180
+ }
181
+ ```
182
+
183
+ | 名称 | 说明 | 回调参数 |
184
+ | ------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------- |
185
+ | ok | 截图确认事件 | `(event: Event, buffer: Buffer, data: ScreenshotsData) => void` |
186
+ | cancel | 截图取消事件 | `(event: Event) => void` |
187
+ | save | 截图保存事件 | `(event: Event, buffer: Buffer, data: ScreenshotsData) => void` |
188
+ | afterSave | 截图保存（取消保存）后的事件 | `(event: Event, buffer: Buffer, data: ScreenshotsData, isSaved: boolean) => void` |
189
+ | windowCreated | 截图窗口被创建后触发 | `($win: BrowserWindow) => void` |
190
+ | windowClosed | 截图窗口被关闭后触发，对`BrowserWindow` `closed` 事件的转发 | `($win: BrowserWindow) => void` |
191
+
192
+ ### 说明
193
+
194
+ - event: 事件对象
195
+ - buffer: png 图片 buffer
196
+ - bounds: 截图区域信息
197
+ - display: 截图的屏幕
198
+ - `event`对象可调用`preventDefault`方法来阻止默认事件，例如阻止默认保存事件
199
+
200
+ ```ts
201
+ const screenshots = new Screenshots({
202
+ lang: {
203
+ magnifier_position_label: "Position",
204
+ operation_ok_title: "Ok",
205
+ operation_cancel_title: "Cancel",
206
+ operation_save_title: "Save",
207
+ operation_redo_title: "Redo",
208
+ operation_undo_title: "Undo",
209
+ operation_mosaic_title: "Mosaic",
210
+ operation_text_title: "Text",
211
+ operation_brush_title: "Brush",
212
+ operation_arrow_title: "Arrow",
213
+ operation_ellipse_title: "Ellipse",
214
+ operation_rectangle_title: "Rectangle",
215
+ },
216
+ });
217
+
218
+ screenshots.on("save", (e, buffer, data) => {
219
+ // 阻止插件自带的保存功能
220
+ // 用户自己控制保存功能
221
+ e.preventDefault();
222
+ // 用户可在这里自己定义保存功能
223
+ console.log("capture", buffer, data);
224
+ });
225
+
226
+ screenshots.startCapture();
227
+ ```
228
+
229
+ ## Screenshot
230
+
231
+ ![screenshot](../../screenshot.jpg)
package/lib/index.js CHANGED
@@ -17,6 +17,18 @@ electron_1.app.whenReady().then(function () {
17
17
  electron_1.globalShortcut.register('ctrl+shift+a', function () {
18
18
  screenshots.startCapture();
19
19
  });
20
+ screenshots.on('windowCreated', function ($win) {
21
+ $win.on('focus', function () {
22
+ electron_1.globalShortcut.register('esc', function () {
23
+ if ($win === null || $win === void 0 ? void 0 : $win.isFocused()) {
24
+ screenshots.endCapture();
25
+ }
26
+ });
27
+ });
28
+ $win.on('blur', function () {
29
+ electron_1.globalShortcut.unregister('esc');
30
+ });
31
+ });
20
32
  // 防止不能关闭截图界面
21
33
  electron_1.globalShortcut.register('ctrl+shift+q', function () {
22
34
  electron_1.app.quit();
package/lib/screenshots.js CHANGED
@@ -229,7 +229,9 @@ var Screenshots = /** @class */ (function (_super) {
229
229
  if (!this.$win || ((_b = (_a = this.$win) === null || _a === void 0 ? void 0 : _a.isDestroyed) === null || _b === void 0 ? void 0 : _b.call(_a))) {
230
230
  windowTypes = {
231
231
  darwin: 'panel',
232
- linux: 'dock',
232
+ // linux 必须设置为 undefined，否则会在部分系统上不能触发focus 事件
233
+ // https://github.com/nashaofu/screenshots/issues/203#issuecomment-1518923486
234
+ linux: undefined,
233
235
  win32: 'toolbar',
234
236
  };
235
237
  this.$win = new electron_1.BrowserWindow({
@@ -269,12 +271,14 @@ var Screenshots = /** @class */ (function (_super) {
269
271
  enableLargerThanScreen: false,
270
272
  acceptFirstMouse: true,
271
273
  });
274
+ this.emit('windowCreated', this.$win);
272
275
  this.$win.on('show', function () {
273
276
  var _a, _b;
274
277
  (_a = _this.$win) === null || _a === void 0 ? void 0 : _a.focus();
275
278
  (_b = _this.$win) === null || _b === void 0 ? void 0 : _b.setKiosk(true);
276
279
  });
277
280
  this.$win.on('closed', function () {
281
+ _this.emit('windowClosed', _this.$win);
278
282
  _this.$win = null;
279
283
  });
280
284
  }
@@ -434,15 +438,18 @@ var Screenshots = /** @class */ (function (_super) {
434
438
  case 1:
435
439
  _a = _b.sent(), canceled = _a.canceled, filePath = _a.filePath;
436
440
  if (!this.$win) {
441
+ this.emit('afterSave', new event_1.default(), buffer, data, false); // isSaved = false
437
442
  return [2 /*return*/];
438
443
  }
439
444
  this.$win.setAlwaysOnTop(true);
440
445
  if (canceled || !filePath) {
446
+ this.emit('afterSave', new event_1.default(), buffer, data, false); // isSaved = false
441
447
  return [2 /*return*/];
442
448
  }
443
449
  return [4 /*yield*/, fs_extra_1.default.writeFile(filePath, buffer)];
444
450
  case 2:
445
451
  _b.sent();
452
+ this.emit('afterSave', new event_1.default(), buffer, data, true); // isSaved = true
446
453
  this.endCapture();
447
454
  return [2 /*return*/];
448
455
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "electron-screenshots",
3
- "version": "0.5.21",
3
+ "version": "0.5.23",
4
4
  "description": "electron 截图插件",
5
5
  "types": "lib/screenshots.d.ts",
6
6
  "main": "lib/screenshots.js",
@@ -38,7 +38,7 @@
38
38
  "debug": "^4.3.4",
39
39
  "fs-extra": "^11.1.1",
40
40
  "node-screenshots": "^0.1.4",
41
- "react-screenshots": "^0.5.21"
41
+ "react-screenshots": "^0.5.22"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "electron": ">=14"
@@ -58,5 +58,5 @@
58
58
  "rimraf": "^4.4.1",
59
59
  "typescript": "^5.0.2"
60
60
  },
61
- "gitHead": "34341ff2e6ae3856ff2c838b9b8f8843c90a789d"
61
+ "gitHead": "34b1dc24cec037ec5e2dbfa41db1fdf8f446df6e"
62
62
  }