electron-screenshots 0.5.26 → 0.5.27

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 (3) hide show
  1. package/README.md +231 -231
  2. package/lib/index.js +27 -24
  3. package/package.json +3 -3
package/README.md CHANGED
@@ -1,231 +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
- // 保存后的回调事件
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)
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
@@ -310,41 +310,44 @@ var Screenshots = /** @class */ (function (_super) {
310
310
  };
311
311
  Screenshots.prototype.capture = function (display) {
312
312
  return __awaiter(this, void 0, void 0, function () {
313
- var NodeScreenshots, capturer, image, err_1, sources, source;
313
+ var Monitor, monitor, image, buffer, err_1, sources, source;
314
314
  return __generator(this, function (_a) {
315
315
  switch (_a.label) {
316
316
  case 0:
317
317
  this.logger('SCREENSHOTS:capture');
318
318
  _a.label = 1;
319
319
  case 1:
320
- _a.trys.push([1, 4, , 6]);
320
+ _a.trys.push([1, 5, , 7]);
321
321
  return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('node-screenshots')); })];
322
322
  case 2:
323
- NodeScreenshots = (_a.sent()).Screenshots;
324
- capturer = NodeScreenshots.fromPoint(display.x + display.width / 2, display.y + display.height / 2);
325
- this.logger('SCREENSHOTS:capture NodeScreenshots.fromPoint arguments %o', display);
326
- this.logger('SCREENSHOTS:capture NodeScreenshots.fromPoint return %o', capturer
327
- ? {
328
- id: capturer.id,
329
- x: capturer.x,
330
- y: capturer.y,
331
- width: capturer.width,
332
- height: capturer.height,
333
- rotation: capturer.rotation,
334
- scaleFactor: capturer.scaleFactor,
335
- isPrimary: capturer.isPrimary,
336
- }
337
- : null);
338
- if (!capturer) {
339
- throw new Error("NodeScreenshots.fromDisplay(".concat(display.id, ") get null"));
323
+ Monitor = (_a.sent()).Monitor;
324
+ monitor = Monitor.fromPoint(display.x + display.width / 2, display.y + display.height / 2);
325
+ this.logger('SCREENSHOTS:capture Monitor.fromPoint arguments %o', display);
326
+ this.logger('SCREENSHOTS:capture Monitor.fromPoint return %o', {
327
+ id: monitor === null || monitor === void 0 ? void 0 : monitor.id,
328
+ name: monitor === null || monitor === void 0 ? void 0 : monitor.name,
329
+ x: monitor === null || monitor === void 0 ? void 0 : monitor.x,
330
+ y: monitor === null || monitor === void 0 ? void 0 : monitor.y,
331
+ width: monitor === null || monitor === void 0 ? void 0 : monitor.width,
332
+ height: monitor === null || monitor === void 0 ? void 0 : monitor.height,
333
+ rotation: monitor === null || monitor === void 0 ? void 0 : monitor.rotation,
334
+ scaleFactor: monitor === null || monitor === void 0 ? void 0 : monitor.scaleFactor,
335
+ frequency: monitor === null || monitor === void 0 ? void 0 : monitor.frequency,
336
+ isPrimary: monitor === null || monitor === void 0 ? void 0 : monitor.isPrimary,
337
+ });
338
+ if (!monitor) {
339
+ throw new Error("Monitor.fromDisplay(".concat(display.id, ") get null"));
340
340
  }
341
- return [4 /*yield*/, capturer.capture()];
341
+ return [4 /*yield*/, monitor.captureImage()];
342
342
  case 3:
343
343
  image = _a.sent();
344
- return [2 /*return*/, "data:image/png;base64,".concat(image.toString('base64'))];
344
+ return [4 /*yield*/, image.toPng(true)];
345
345
  case 4:
346
+ buffer = _a.sent();
347
+ return [2 /*return*/, "data:image/png;base64,".concat(buffer.toString('base64'))];
348
+ case 5:
346
349
  err_1 = _a.sent();
347
- this.logger('SCREENSHOTS:capture NodeScreenshots capture() error %o', err_1);
350
+ this.logger('SCREENSHOTS:capture Monitor capture() error %o', err_1);
348
351
  return [4 /*yield*/, electron_1.desktopCapturer.getSources({
349
352
  types: ['screen'],
350
353
  thumbnailSize: {
@@ -352,7 +355,7 @@ var Screenshots = /** @class */ (function (_super) {
352
355
  height: display.height * display.scaleFactor,
353
356
  },
354
357
  })];
355
- case 5:
358
+ case 6:
356
359
  sources = _a.sent();
357
360
  source = void 0;
358
361
  // Linux系统上，screen.getDisplayNearestPoint 返回的 Display 对象的 id
@@ -370,7 +373,7 @@ var Screenshots = /** @class */ (function (_super) {
370
373
  throw new Error("Can't find screen source");
371
374
  }
372
375
  return [2 /*return*/, source.thumbnail.toDataURL()];
373
- case 6: return [2 /*return*/];
376
+ case 7: return [2 /*return*/];
374
377
  }
375
378
  });
376
379
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "electron-screenshots",
3
- "version": "0.5.26",
3
+ "version": "0.5.27",
4
4
  "description": "electron 截图插件",
5
5
  "types": "lib/index.d.ts",
6
6
  "main": "lib/index.cjs.js",
@@ -38,7 +38,7 @@
38
38
  "dependencies": {
39
39
  "debug": "^4.3.4",
40
40
  "fs-extra": "^11.1.1",
41
- "node-screenshots": "^0.1.9",
41
+ "node-screenshots": "^0.2.1",
42
42
  "react-screenshots": "^0.5.22"
43
43
  },
44
44
  "peerDependencies": {
@@ -59,5 +59,5 @@
59
59
  "rimraf": "^4.4.1",
60
60
  "typescript": "^5.0.2"
61
61
  },
62
- "gitHead": "9b74455da4a2fc479d243d0e8a9caaad34d6f425"
62
+ "gitHead": "bde35a35bc1876098aa5d00c5c1ad088ab4fe9fb"
63
63
  }