使用electron-screenshots插件实现electron+vue3+vite项目截图功能

• “electron-screenshots”: “^0.5.12”,
• “electron”: “^18.0.3”,

vite.config.js中配置

externals: {
      "electron-screenshots": 'require("electron-screenshots")'
    },

主程序中

const { initScreenshoots } = require("./screenshoots");
app.whenReady().then(() => {
   //初始化截图工具
  initScreenshoots();
});

截图工具函数

这里为了逻辑清晰，提取到单独的js中

screenshoots.js

const { globalShortcut } = require("electron");
const Screenshots = require("electron-screenshots").default;

module.exports.initScreenshoots = () => {
  const screenshots = new Screenshots();
  globalShortcut.register("ctrl+shift+x", () => {
    screenshots.startCapture();
  });
  // 点击确定按钮回调事件
  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);
  });
  // esc取消
  globalShortcut.register("esc", () => {
    if (screenshots.$win?.isFocused()) {
      screenshots.endCapture();
    }
  });
};

博主开发了一个浏览器aweb123.com