electron-screenshots 0.5.20 → 0.5.22
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.
- package/README.md +96 -94
- package/lib/index.js +12 -0
- package/lib/screenshots.js +25 -22
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -13,42 +13,42 @@
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
15
|
```ts
|
|
16
|
-
import debug from
|
|
17
|
-
import { app, globalShortcut } from
|
|
18
|
-
import Screenshots from
|
|
16
|
+
import debug from "electron-debug";
|
|
17
|
+
import { app, globalShortcut } from "electron";
|
|
18
|
+
import Screenshots from "./screenshots";
|
|
19
19
|
|
|
20
20
|
app.whenReady().then(() => {
|
|
21
|
-
const screenshots = new Screenshots()
|
|
22
|
-
globalShortcut.register(
|
|
23
|
-
screenshots.startCapture()
|
|
24
|
-
screenshots.$view.webContents.openDevTools()
|
|
25
|
-
})
|
|
21
|
+
const screenshots = new Screenshots();
|
|
22
|
+
globalShortcut.register("ctrl+shift+a", () => {
|
|
23
|
+
screenshots.startCapture();
|
|
24
|
+
screenshots.$view.webContents.openDevTools();
|
|
25
|
+
});
|
|
26
26
|
// 点击确定按钮回调事件
|
|
27
|
-
screenshots.on(
|
|
28
|
-
console.log(
|
|
29
|
-
})
|
|
27
|
+
screenshots.on("ok", (e, buffer, bounds) => {
|
|
28
|
+
console.log("capture", buffer, bounds);
|
|
29
|
+
});
|
|
30
30
|
// 点击取消按钮回调事件
|
|
31
|
-
screenshots.on(
|
|
32
|
-
console.log(
|
|
33
|
-
})
|
|
34
|
-
screenshots.on(
|
|
31
|
+
screenshots.on("cancel", () => {
|
|
32
|
+
console.log("capture", "cancel1");
|
|
33
|
+
});
|
|
34
|
+
screenshots.on("cancel", (e) => {
|
|
35
35
|
// 执行了preventDefault
|
|
36
36
|
// 点击取消不会关闭截图窗口
|
|
37
|
-
e.preventDefault()
|
|
38
|
-
console.log(
|
|
39
|
-
})
|
|
37
|
+
e.preventDefault();
|
|
38
|
+
console.log("capture", "cancel2");
|
|
39
|
+
});
|
|
40
40
|
// 点击保存按钮回调事件
|
|
41
|
-
screenshots.on(
|
|
42
|
-
console.log(
|
|
43
|
-
})
|
|
44
|
-
debug({ showDevTools: true, devToolsMode:
|
|
45
|
-
})
|
|
46
|
-
|
|
47
|
-
app.on(
|
|
48
|
-
if (process.platform !==
|
|
49
|
-
app.quit()
|
|
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
50
|
}
|
|
51
|
-
})
|
|
51
|
+
});
|
|
52
52
|
```
|
|
53
53
|
|
|
54
54
|
### 注意
|
|
@@ -68,24 +68,24 @@ app.on('window-all-closed', () => {
|
|
|
68
68
|
```js
|
|
69
69
|
// vue.config.js
|
|
70
70
|
module.exports = {
|
|
71
|
-
publicPath:
|
|
71
|
+
publicPath: ".",
|
|
72
72
|
pluginOptions: {
|
|
73
73
|
electronBuilder: {
|
|
74
74
|
// 不打包，使用 require 加载
|
|
75
|
-
externals: [
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
}
|
|
75
|
+
externals: ["electron-screenshots"],
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
};
|
|
79
79
|
```
|
|
80
80
|
|
|
81
81
|
- esc 取消截图，可用以下代码实现按 esc 取消截图
|
|
82
82
|
|
|
83
83
|
```js
|
|
84
|
-
globalShortcut.register(
|
|
84
|
+
globalShortcut.register("esc", () => {
|
|
85
85
|
if (screenshots.$win?.isFocused()) {
|
|
86
|
-
screenshots.endCapture()
|
|
86
|
+
screenshots.endCapture();
|
|
87
87
|
}
|
|
88
|
-
})
|
|
88
|
+
});
|
|
89
89
|
```
|
|
90
90
|
|
|
91
91
|
- 加速截图界面展示，不销毁`BrowserWindow`，减少创建窗口的开销，可用以下代码实现。**需注意，启用该功能，会导致`window-all-closed`事件不触发，因此需要手动关闭截图窗口**
|
|
@@ -95,42 +95,42 @@ globalShortcut.register('esc', () => {
|
|
|
95
95
|
// 如果设置为 true 则会在第一次调用截图窗口时创建，后续调用时直接使用
|
|
96
96
|
// 且由于窗口不会 close，所以不会触发 app 的 `window-all-closed` 事件
|
|
97
97
|
const screenshots = new Screenshots({
|
|
98
|
-
singleWindow: true
|
|
99
|
-
})
|
|
98
|
+
singleWindow: true,
|
|
99
|
+
});
|
|
100
100
|
```
|
|
101
101
|
|
|
102
102
|
## Methods
|
|
103
103
|
|
|
104
|
-
- `Debugger
|
|
104
|
+
- `Debugger`类型产考[debug](https://github.com/debug-js/debug)中的`Debugger`类型
|
|
105
105
|
|
|
106
106
|
```ts
|
|
107
|
-
export type LoggerFn = (...args: unknown[]) => void
|
|
108
|
-
export type Logger = Debugger | LoggerFn
|
|
107
|
+
export type LoggerFn = (...args: unknown[]) => void;
|
|
108
|
+
export type Logger = Debugger | LoggerFn;
|
|
109
109
|
|
|
110
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
|
|
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
123
|
}
|
|
124
124
|
|
|
125
125
|
export interface ScreenshotsOpts {
|
|
126
|
-
lang?: Lang
|
|
126
|
+
lang?: Lang;
|
|
127
127
|
// 调用日志，默认值为 debug('electron-screenshots')
|
|
128
128
|
// debug https://www.npmjs.com/package/debug
|
|
129
|
-
logger?: Logger
|
|
129
|
+
logger?: Logger;
|
|
130
130
|
// 是否复用截图窗口，加快截图窗口显示，默认值为 false
|
|
131
131
|
// 如果设置为 true 则会在第一次调用截图窗口时创建，后续调用时直接使用
|
|
132
132
|
// 且由于窗口不会 close，所以不会触发 app 的 `window-all-closed` 事件
|
|
133
|
-
singleWindow?: boolean
|
|
133
|
+
singleWindow?: boolean;
|
|
134
134
|
}
|
|
135
135
|
```
|
|
136
136
|
|
|
@@ -147,39 +147,41 @@ export interface ScreenshotsOpts {
|
|
|
147
147
|
|
|
148
148
|
```ts
|
|
149
149
|
interface Bounds {
|
|
150
|
-
x: number
|
|
151
|
-
y: number
|
|
152
|
-
width: number
|
|
153
|
-
height: number
|
|
150
|
+
x: number;
|
|
151
|
+
y: number;
|
|
152
|
+
width: number;
|
|
153
|
+
height: number;
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
export interface Display {
|
|
157
|
-
id: number
|
|
158
|
-
x: number
|
|
159
|
-
y: number
|
|
160
|
-
width: number
|
|
161
|
-
height: number
|
|
157
|
+
id: number;
|
|
158
|
+
x: number;
|
|
159
|
+
y: number;
|
|
160
|
+
width: number;
|
|
161
|
+
height: number;
|
|
162
162
|
}
|
|
163
163
|
|
|
164
164
|
export interface ScreenshotsData {
|
|
165
|
-
bounds: Bounds
|
|
166
|
-
display: Display
|
|
165
|
+
bounds: Bounds;
|
|
166
|
+
display: Display;
|
|
167
167
|
}
|
|
168
168
|
|
|
169
169
|
class Event {
|
|
170
|
-
public defaultPrevented = false
|
|
170
|
+
public defaultPrevented = false;
|
|
171
171
|
|
|
172
172
|
public preventDefault(): void {
|
|
173
|
-
this.defaultPrevented = true
|
|
173
|
+
this.defaultPrevented = true;
|
|
174
174
|
}
|
|
175
175
|
}
|
|
176
176
|
```
|
|
177
177
|
|
|
178
|
-
| 名称
|
|
179
|
-
|
|
|
180
|
-
| ok
|
|
181
|
-
| cancel
|
|
182
|
-
| save
|
|
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
|
+
| windowCreated | 截图窗口被创建后触发 | `($win: BrowserWindow) => void` |
|
|
184
|
+
| windowClosed | 截图窗口被关闭后触发，对`BrowserWindow` `closed` 事件的转发 | `($win: BrowserWindow) => void` |
|
|
183
185
|
|
|
184
186
|
### 说明
|
|
185
187
|
|
|
@@ -192,30 +194,30 @@ class Event {
|
|
|
192
194
|
```ts
|
|
193
195
|
const screenshots = new Screenshots({
|
|
194
196
|
lang: {
|
|
195
|
-
magnifier_position_label:
|
|
196
|
-
operation_ok_title:
|
|
197
|
-
operation_cancel_title:
|
|
198
|
-
operation_save_title:
|
|
199
|
-
operation_redo_title:
|
|
200
|
-
operation_undo_title:
|
|
201
|
-
operation_mosaic_title:
|
|
202
|
-
operation_text_title:
|
|
203
|
-
operation_brush_title:
|
|
204
|
-
operation_arrow_title:
|
|
205
|
-
operation_ellipse_title:
|
|
206
|
-
operation_rectangle_title:
|
|
207
|
-
}
|
|
208
|
-
})
|
|
209
|
-
|
|
210
|
-
screenshots.on(
|
|
197
|
+
magnifier_position_label: "Position",
|
|
198
|
+
operation_ok_title: "Ok",
|
|
199
|
+
operation_cancel_title: "Cancel",
|
|
200
|
+
operation_save_title: "Save",
|
|
201
|
+
operation_redo_title: "Redo",
|
|
202
|
+
operation_undo_title: "Undo",
|
|
203
|
+
operation_mosaic_title: "Mosaic",
|
|
204
|
+
operation_text_title: "Text",
|
|
205
|
+
operation_brush_title: "Brush",
|
|
206
|
+
operation_arrow_title: "Arrow",
|
|
207
|
+
operation_ellipse_title: "Ellipse",
|
|
208
|
+
operation_rectangle_title: "Rectangle",
|
|
209
|
+
},
|
|
210
|
+
});
|
|
211
|
+
|
|
212
|
+
screenshots.on("save", (e, buffer, data) => {
|
|
211
213
|
// 阻止插件自带的保存功能
|
|
212
214
|
// 用户自己控制保存功能
|
|
213
|
-
e.preventDefault()
|
|
215
|
+
e.preventDefault();
|
|
214
216
|
// 用户可在这里自己定义保存功能
|
|
215
|
-
console.log(
|
|
216
|
-
})
|
|
217
|
+
console.log("capture", buffer, data);
|
|
218
|
+
});
|
|
217
219
|
|
|
218
|
-
screenshots.startCapture()
|
|
220
|
+
screenshots.startCapture();
|
|
219
221
|
```
|
|
220
222
|
|
|
221
223
|
## Screenshot
|
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
|
@@ -152,7 +152,6 @@ var Screenshots = /** @class */ (function (_super) {
|
|
|
152
152
|
}
|
|
153
153
|
// 先清除 Kiosk 模式，然后取消全屏才有效
|
|
154
154
|
this.$win.setKiosk(false);
|
|
155
|
-
this.$win.setSimpleFullScreen(false);
|
|
156
155
|
this.$win.blur();
|
|
157
156
|
this.$win.blurWebView();
|
|
158
157
|
this.$win.unmaximize();
|
|
@@ -216,6 +215,7 @@ var Screenshots = /** @class */ (function (_super) {
|
|
|
216
215
|
Screenshots.prototype.createWindow = function (display) {
|
|
217
216
|
var _a, _b;
|
|
218
217
|
return __awaiter(this, void 0, void 0, function () {
|
|
218
|
+
var windowTypes;
|
|
219
219
|
var _this = this;
|
|
220
220
|
return __generator(this, function (_c) {
|
|
221
221
|
switch (_c.label) {
|
|
@@ -227,6 +227,13 @@ var Screenshots = /** @class */ (function (_super) {
|
|
|
227
227
|
_c.sent();
|
|
228
228
|
// 复用未销毁的窗口
|
|
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
|
+
windowTypes = {
|
|
231
|
+
darwin: 'panel',
|
|
232
|
+
// linux 必须设置为 undefined，否则会在部分系统上不能触发focus 事件
|
|
233
|
+
// https://github.com/nashaofu/screenshots/issues/203#issuecomment-1518923486
|
|
234
|
+
linux: undefined,
|
|
235
|
+
win32: 'toolbar',
|
|
236
|
+
};
|
|
230
237
|
this.$win = new electron_1.BrowserWindow({
|
|
231
238
|
title: 'screenshots',
|
|
232
239
|
x: display.x,
|
|
@@ -234,44 +241,44 @@ var Screenshots = /** @class */ (function (_super) {
|
|
|
234
241
|
width: display.width,
|
|
235
242
|
height: display.height,
|
|
236
243
|
useContentSize: true,
|
|
244
|
+
type: windowTypes[process.platform],
|
|
237
245
|
frame: false,
|
|
238
246
|
show: false,
|
|
239
247
|
autoHideMenuBar: true,
|
|
240
248
|
transparent: true,
|
|
241
|
-
|
|
242
|
-
resizable: process.platform !== 'darwin',
|
|
249
|
+
resizable: false,
|
|
243
250
|
movable: false,
|
|
251
|
+
minimizable: false,
|
|
252
|
+
maximizable: false,
|
|
244
253
|
// focusable 必须设置为 true, 否则窗口不能及时响应esc按键，输入框也不能输入
|
|
245
254
|
focusable: true,
|
|
246
|
-
|
|
247
|
-
|
|
255
|
+
skipTaskbar: true,
|
|
256
|
+
alwaysOnTop: true,
|
|
248
257
|
/**
|
|
249
258
|
* linux 下必须设置为false，否则不能全屏显示在最上层
|
|
250
|
-
* mac 下设置为false
|
|
251
|
-
* https://github.com/nashaofu/screenshots/issues/148
|
|
259
|
+
* mac 下设置为false，否则可能会导致程序坞不恢复问题，且与 kiosk 模式冲突
|
|
252
260
|
*/
|
|
253
|
-
|
|
254
|
-
//
|
|
255
|
-
|
|
261
|
+
fullscreen: false,
|
|
262
|
+
// mac fullscreenable 设置为 true 会导致应用崩溃
|
|
263
|
+
fullscreenable: false,
|
|
264
|
+
kiosk: true,
|
|
256
265
|
backgroundColor: '#00000000',
|
|
257
266
|
titleBarStyle: 'hidden',
|
|
258
|
-
alwaysOnTop: true,
|
|
259
|
-
enableLargerThanScreen: true,
|
|
260
|
-
skipTaskbar: true,
|
|
261
267
|
hasShadow: false,
|
|
262
268
|
paintWhenInitiallyHidden: false,
|
|
269
|
+
// mac 特有的属性
|
|
270
|
+
roundedCorners: false,
|
|
271
|
+
enableLargerThanScreen: false,
|
|
263
272
|
acceptFirstMouse: true,
|
|
264
273
|
});
|
|
274
|
+
this.emit('windowCreated', this.$win);
|
|
265
275
|
this.$win.on('show', function () {
|
|
266
276
|
var _a, _b;
|
|
267
277
|
(_a = _this.$win) === null || _a === void 0 ? void 0 : _a.focus();
|
|
268
|
-
|
|
269
|
-
* 在窗口显示时设置，防止与 fullscreen、x、y、width、height 等冲突, 导致显示效果不符合预期
|
|
270
|
-
* mac 下不设置 kiosk 模式，https://github.com/nashaofu/screenshots/issues/148
|
|
271
|
-
*/
|
|
272
|
-
(_b = _this.$win) === null || _b === void 0 ? void 0 : _b.setKiosk(process.platform !== 'darwin');
|
|
278
|
+
(_b = _this.$win) === null || _b === void 0 ? void 0 : _b.setKiosk(true);
|
|
273
279
|
});
|
|
274
280
|
this.$win.on('closed', function () {
|
|
281
|
+
_this.emit('windowClosed', _this.$win);
|
|
275
282
|
_this.$win = null;
|
|
276
283
|
});
|
|
277
284
|
}
|
|
@@ -287,10 +294,6 @@ var Screenshots = /** @class */ (function (_super) {
|
|
|
287
294
|
});
|
|
288
295
|
}
|
|
289
296
|
this.$win.blur();
|
|
290
|
-
this.$win.setKiosk(false);
|
|
291
|
-
if (process.platform === 'darwin') {
|
|
292
|
-
this.$win.setSimpleFullScreen(true);
|
|
293
|
-
}
|
|
294
297
|
this.$win.setBounds(display);
|
|
295
298
|
this.$view.setBounds({
|
|
296
299
|
x: 0,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "electron-screenshots",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.22",
|
|
4
4
|
"description": "electron 截图插件",
|
|
5
5
|
"types": "lib/screenshots.d.ts",
|
|
6
6
|
"main": "lib/screenshots.js",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"debug": "^4.3.4",
|
|
39
39
|
"fs-extra": "^11.1.1",
|
|
40
|
-
"node-screenshots": "^0.1.
|
|
41
|
-
"react-screenshots": "^0.5.
|
|
40
|
+
"node-screenshots": "^0.1.4",
|
|
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": "
|
|
61
|
+
"gitHead": "0ca043df538efdadd3ebb72bc8a6d8832575561a"
|
|
62
62
|
}
|