#夏日生活打卡季#

今天给大家分享一款超棒的electron截图插件electron-screenshots。

electron-screenshots 基于electron桌面端截图插件，提供了与electron截图相关的功能。

可以快速地实现截图功能，并支持多种截图操作，例如马赛克、文本、画笔、箭头、椭圆和矩形。

安装

npm i electron-screenshots

快速使用

import debug from "electron-debug";
import { app, globalShortcut } from "electron";
import Screenshots from "electron-screenshots";

app.whenReady().then(() => {
  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);
  });
  debug({ showDevTools: true, devToolsMode: "undocked" });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

非常精美的一款截图插件，另外还提供了react版本。

// npm地址
https://www.npmjs.com/package/electron-screenshots

// 预览地址
https://nashaofu.github.io/screenshots/

OK，今天的分享就到这里了。