electron 截图插件
npm install electron-screenshotsts
import debug from "electron-debug";
import { app, globalShortcut } from "electron";
import Screenshots from "./screenshots";
app.whenReady().then(() => {
app.setAppUserModelId('com.electron.screenshots')
const screenshots = new Screenshots();
globalShortcut.register("ctrl+shift+a", () => {
screenshots.startCapture();
screenshots.$view.webContents.openDevTools();
});
// 点击确定按钮回调事件
screenshots.on("ok", (e, buffer, bounds) => {
console.log("capture", buffer, bounds);
});
// 点击取消按钮回调事件
screenshots.on("cancel", () => {
console.log("capture", "cancel1");
});
screenshots.on("cancel", (e) => {
// 执行了preventDefault
// 点击取消不会关闭截图窗口
e.preventDefault();
console.log("capture", "cancel2");
});
// 点击保存按钮回调事件
screenshots.on("save", (e, buffer, bounds) => {
console.log("capture", buffer, bounds);
});
// 保存后的回调事件
screenshots.on("afterSave", (e, buffer, bounds, isSaved) => {
console.log("capture", buffer, bounds);
console.log("isSaved", isSaved); // 是否保存成功
});
debug({ showDevTools: true, devToolsMode: "undocked" });
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
`
$3
- 如果使用了 webpack 打包主进程，请在主进程 webpack 配置中修改如下配置，否则可能会出现不能调用截图窗口的情况
`js
{
externals: {
'electron-screenshots': 'require("electron-screenshots")'
}
}
`
- vue-cli-plugin-electron-builder配置示例vue-cli-plugin-electron-builder-issue
`js
// vue.config.js
module.exports = {
publicPath: ".",
pluginOptions: {
electronBuilder: {
// 不打包，使用 require 加载
externals: ["electron-screenshots"],
},
},
};
`
- vite 配置示例：
`js
// vite.config.js
import { defineConfig } from "vite";
import viteExternals from "vite-plugin-externals";
export default defineConfig({
plugins: [
viteExternals({
"electron-screenshots": 'require("electron-screenshots")', // 模块名称: 全局变量
}),
],
});
`
- esc 取消截图，可用以下代码实现按 esc 取消截图
`js
globalShortcut.register("esc", () => {
if (screenshots.$win?.isFocused()) {
screenshots.endCapture();
}
});
`
- 加速截图界面展示，不销毁BrowserWindow，减少创建窗口的开销，可用以下代码实现。需注意，启用该功能，会导致window-all-closed事件不触发，因此需要手动关闭截图窗口
`js
// 是否复用截图窗口，加快截图窗口显示，默认值为 false
// 如果设置为 true 则会在第一次调用截图窗口时创建，后续调用时直接使用
// 且由于窗口不会 close，所以不会触发 app 的 window-all-closed 事件
const screenshots = new Screenshots({
singleWindow: true,
});
`
Methods
- Debugger类型产考debug中的Debugger类型
`ts
export type LoggerFn = (...args: unknown[]) => void;
export type Logger = Debugger | LoggerFn;
export interface Lang {
magnifier_position_label?: string;
operation_ok_title?: string;
operation_cancel_title?: string;
operation_save_title?: string;
operation_redo_title?: string;
operation_undo_title?: string;
operation_mosaic_title?: string;
operation_text_title?: string;
operation_brush_title?: string;
operation_arrow_title?: string;
operation_ellipse_title?: string;
operation_rectangle_title?: string;
}
export interface ScreenshotsOpts {
lang?: Lang;
// 调用日志，默认值为 debug('electron-screenshots')
// debug https://www.npmjs.com/package/debug
logger?: Logger;
// 是否复用截图窗口，加快截图窗口显示，默认值为 false
// 如果设置为 true 则会在第一次调用截图窗口时创建，后续调用时直接使用
// 且由于窗口不会 close，所以不会触发 app 的 window-all-closed 事件
singleWindow?: boolean;
}
`
| 名称 | 说明 | 返回值 |
| ------------------------------------------------- | ---------------- | ------ |
| constructor(opts: ScreenshotsOpts): Screenshots | 调用截图方法截图 | - |
| startCapture(): Promise | 调用截图方法截图 | - |
| endCapture(): Promise | 手动结束截图 | - |
| setLang(lang: Lang): Promise | 修改语言 | - |
Events
- 数据类型
`ts
interface Bounds {
x: number;
y: number;
width: number;
height: number;
}
export interface Display {
id: number;
x: number;
y: number;
width: number;
height: number;
}
export interface ScreenshotsData {
bounds: Bounds;
display: Display;
}
class Event {
public defaultPrevented = false;
public preventDefault(): void {
this.defaultPrevented = true;
}
}
`
| 名称 | 说明 | 回调参数 |
| ------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------- |
| ok | 截图确认事件 | (event: Event, buffer: Buffer, data: ScreenshotsData) => void |
| cancel | 截图取消事件 | (event: Event) => void |
| save | 截图保存事件 | (event: Event, buffer: Buffer, data: ScreenshotsData) => void |
| afterSave | 截图保存（取消保存）后的事件 | (event: Event, buffer: Buffer, data: ScreenshotsData, isSaved: boolean) => void |
| windowCreated | 截图窗口被创建后触发 | ($win: BrowserWindow) => void |
| windowClosed | 截图窗口被关闭后触发，对BrowserWindow closed 事件的转发 | ($win: BrowserWindow) => void |
$3
- event: 事件对象
- buffer: png 图片 buffer
- bounds: 截图区域信息
- display: 截图的屏幕
- event对象可调用preventDefault方法来阻止默认事件，例如阻止默认保存事件
`ts
const screenshots = new Screenshots({
lang: {
magnifier_position_label: "Position",
operation_ok_title: "Ok",
operation_cancel_title: "Cancel",
operation_save_title: "Save",
operation_redo_title: "Redo",
operation_undo_title: "Undo",
operation_mosaic_title: "Mosaic",
operation_text_title: "Text",
operation_brush_title: "Brush",
operation_arrow_title: "Arrow",
operation_ellipse_title: "Ellipse",
operation_rectangle_title: "Rectangle",
},
});
screenshots.on("save", (e, buffer, data) => {
// 阻止插件自带的保存功能
// 用户自己控制保存功能
e.preventDefault();
// 用户可在这里自己定义保存功能
console.log("capture", buffer, data);
});
screenshots.startCapture();
``