electron-screenshots 0.0.17

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 nashaofu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,126 @@
+# electron-screenshots
+
+> electron 截图插件
+
+## Install
+
+[![NPM](https://nodei.co/npm/electron-screenshots.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/electron-screenshots/)
+
+## Usage
+
+```ts
+import debug from 'electron-debug'
+import { app, globalShortcut } from 'electron'
+import Screenshots from './screenshots'
+
+app.on('ready', () => {
+  const screenshots = new Screenshots()
+  globalShortcut.register('ctrl+shift+a', () => screenshots.startCapture())
+  // 点击确定按钮回调事件
+  screenshots.on('ok', (e, { viewer }) => {
+    console.log('capture', viewer)
+  })
+  // 点击取消按钮回调事件
+  screenshots.on('cancel', () => {
+    console.log('capture', 'cancel1')
+  })
+  screenshots.on('cancel', e => {
+    // 执行了preventDefault
+    // 点击取消不会关闭截图窗口
+    e.preventDefault()
+    console.log('capture', 'cancel2')
+  })
+  // 点击保存按钮回调事件
+  screenshots.on('save', (e, { viewer }) => {
+    console.log('capture', viewer)
+  })
+  debug({ showDevTools: true, devToolsMode: 'undocked' })
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+```
+
+### 注意
+
+* 如果使用了 webpack 打包主进程，请在主进程 webpack 配置中修改如下配置，否则可能会出现不能调用截图窗口的情况
+
+```js
+{
+  externals: {
+    'electron-screenshots': 'require("electron-screenshots")'
+  }
+}
+```
+
+* `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)
+
+```js
+// vue.config.js
+module.exports = {
+  publicPath: '.',
+  pluginOptions: {
+    electronBuilder: {
+      // 不打包，使用 require 加载
+      externals: ['shortcut-capture']
+    }
+  }
+}
+```
+
+## Methods
+
+| 名称         | 说明             | 参数 | 返回值 |
+| ------------ | ---------------- | ---- | ------ |
+| startCapture | 调用截图方法截图 | -    | -      |
+| endCapture   | 手动结束截图     | -    | -      |
+
+## Events
+
+- 数据类型
+
+```ts
+interface Bounds {
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+interface CaptureData {
+  dataURL: string // 图片资源base64
+  bounds: Bounds // 截图区域坐标信息
+}
+
+type OkData = CaptureData
+type SaveData = CaptureData
+```
+
+| 名称   | 说明         | 回调参数                                  |
+| ------ | ------------ | ----------------------------------------- |
+| ok     | 截图确认事件 | `event`:事件对象, `data:OkData`: 截图信息 |
+| cancel | 截图取消事件 | `event`:事件对象                          |
+| save   | 截图保存事件 | `event`:事件对象，`data:OkData`: 截图信息 |
+
+`event`对象可调用`preventDefault`方法来阻止默认事件，例如阻止默认保存事件
+
+```js
+const screenshots = new Screenshots()
+
+screenshots.on('save', (e, data) => {
+  // 阻止插件自带的保存功能
+  // 用户自己控制保存功能
+  e.preventDefault()
+  // 用户可在这里自己定义保存功能
+  console.log('capture', data)
+})
+
+screenshots.startCapture()
+```
+
+## Screenshot
+
+![screenshot](https://raw.githubusercontent.com/nashaofu/screenshots/master/packages/electron-screenshots/screenshot.jpg)

package/lib/event.d.ts

@@ -0,0 +1,4 @@
+export default class Event {
+    defaultPrevented: boolean;
+    preventDefault(): void;
+}

package/lib/event.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var Event = /** @class */ (function () {
+    function Event() {
+        this.defaultPrevented = false;
+    }
+    Event.prototype.preventDefault = function () {
+        this.defaultPrevented = true;
+    };
+    return Event;
+}());
+exports.default = Event;

package/lib/getBoundAndDisplay.d.ts

@@ -0,0 +1,10 @@
+import { Rectangle } from 'electron';
+export interface Display extends Rectangle {
+    id: number;
+}
+export interface BoundAndDisplay {
+    bound: Rectangle;
+    display: Display;
+}
+declare const _default: () => BoundAndDisplay;
+export default _default;

package/lib/getBoundAndDisplay.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var electron_1 = require("electron");
+exports.default = (function () {
+    var point = electron_1.screen.getCursorScreenPoint();
+    var _a = electron_1.screen.getDisplayNearestPoint(point), id = _a.id, bounds = _a.bounds, workArea = _a.workArea, scaleFactor = _a.scaleFactor;
+    // win32 darwin linux平台分别处理
+    var display = process.platform === 'linux' ? workArea : bounds;
+    // mac图片太大，导致截图窗口卡顿，并且截图窗口显示延迟很严重
+    var scale = process.platform === 'darwin' ? 2 : scaleFactor;
+    scale = scale < 2 ? 2 : scale;
+    return {
+        bound: {
+            x: bounds.x,
+            y: bounds.y,
+            width: bounds.width,
+            height: bounds.height
+        },
+        display: {
+            id: id,
+            x: display.x * scale,
+            y: display.y * scale,
+            width: display.width * scale,
+            height: display.height * scale
+        }
+    };
+});

package/lib/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/index.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var electron_debug_1 = __importDefault(require("electron-debug"));
+var electron_1 = require("electron");
+var screenshots_1 = __importDefault(require("./screenshots"));
+electron_1.app.on('ready', function () {
+    var screenshots = new screenshots_1.default();
+    electron_1.globalShortcut.register('ctrl+shift+a', function () { return screenshots.startCapture(); });
+    // 点击确定按钮回调事件
+    screenshots.on('ok', function (e, _a) {
+        var viewer = _a.viewer;
+        console.log('capture', viewer);
+    });
+    // 点击取消按钮回调事件
+    screenshots.on('cancel', function () {
+        console.log('capture', 'cancel1');
+    });
+    screenshots.on('cancel', function (e) {
+        // 执行了preventDefault
+        // 点击取消不会关闭截图窗口
+        e.preventDefault();
+        console.log('capture', 'cancel2');
+    });
+    // 点击保存按钮回调事件
+    screenshots.on('save', function (e, _a) {
+        var viewer = _a.viewer;
+        console.log('capture', viewer);
+    });
+    electron_debug_1.default({ showDevTools: true, devToolsMode: 'undocked' });
+});
+electron_1.app.on('window-all-closed', function () {
+    if (process.platform !== 'darwin') {
+        electron_1.app.quit();
+    }
+});

package/lib/padStart0.d.ts

@@ -0,0 +1,8 @@
+declare const _default: (num: number, len?: number) => string;
+/**
+ * 如果string字符串长度小于 length 则在左侧填充字符
+ * 如果超出length长度则截断超出的部分。
+ * @param {number} num
+ * @param {number} len
+ */
+export default _default;

package/lib/padStart0.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * 如果string字符串长度小于 length 则在左侧填充字符
+ * 如果超出length长度则截断超出的部分。
+ * @param {number} num
+ * @param {number} len
+ */
+exports.default = (function (num, len) {
+    if (len === void 0) { len = 2; }
+    var str = String(num);
+    while (str.length < len) {
+        str = "0" + str;
+    }
+    return str;
+});

package/lib/screenshots.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="node" />
+import { BrowserWindow } from 'electron';
+import Events from 'events';
+export default class Screenshots extends Events {
+    $win: BrowserWindow | null;
+    constructor();
+    /**
+     * 开始截图
+     */
+    startCapture(): void;
+    /**
+     * 结束截图
+     */
+    endCapture(): void;
+    /**
+     * 初始化窗口
+     */
+    private createWindow;
+    /**
+     * 绑定ipc时间处理
+     */
+    private listenIpc;
+}

package/lib/screenshots.js

@@ -0,0 +1,178 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var electron_1 = require("electron");
+var fs_1 = __importDefault(require("fs"));
+var event_1 = __importDefault(require("./event"));
+var events_1 = __importDefault(require("events"));
+var padStart0_1 = __importDefault(require("./padStart0"));
+var getBoundAndDisplay_1 = __importDefault(require("./getBoundAndDisplay"));
+var Screenshots = /** @class */ (function (_super) {
+    __extends(Screenshots, _super);
+    function Screenshots() {
+        var _this = _super.call(this) || this;
+        // 截图窗口对象
+        _this.$win = null;
+        _this.listenIpc();
+        return _this;
+    }
+    /**
+     * 开始截图
+     */
+    Screenshots.prototype.startCapture = function () {
+        var _this = this;
+        if (this.$win && !this.$win.isDestroyed())
+            this.$win.close();
+        var _a = getBoundAndDisplay_1.default(), bound = _a.bound, display = _a.display;
+        this.$win = this.createWindow(bound);
+        electron_1.ipcMain.once('SCREENSHOTS::DOM-READY', function () {
+            if (!_this.$win)
+                return;
+            _this.$win.webContents.send('SCREENSHOTS::SEND-DISPLAY-DATA', display);
+        });
+        // 捕捉桌面之后显示窗口
+        // 避免截图窗口自己被截图
+        electron_1.ipcMain.once('SCREENSHOTS::CAPTURED', function () {
+            if (!_this.$win)
+                return;
+            // linux截图存在黑屏，这里设置为false就不会出现这个问题
+            _this.$win.setFullScreen(true);
+            _this.$win.show();
+            _this.$win.focus();
+        });
+    };
+    /**
+     * 结束截图
+     */
+    Screenshots.prototype.endCapture = function () {
+        if (!this.$win)
+            return;
+        this.$win.setSimpleFullScreen(false);
+        this.$win.close();
+        this.$win = null;
+    };
+    /**
+     * 初始化窗口
+     */
+    Screenshots.prototype.createWindow = function (_a) {
+        var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+        var $win = new electron_1.BrowserWindow({
+            title: 'screenshots',
+            x: x,
+            y: y,
+            width: width,
+            height: height,
+            useContentSize: true,
+            frame: false,
+            show: false,
+            autoHideMenuBar: true,
+            transparent: true,
+            resizable: false,
+            movable: false,
+            focusable: true,
+            // 为true，截屏显示为黑屏
+            // 所以在截屏图像生成后再设置为true
+            // 参考48-49行
+            fullscreen: false,
+            // 设为true mac全屏窗口没有桌面滚动效果
+            simpleFullscreen: true,
+            backgroundColor: '#00000000',
+            titleBarStyle: 'hidden',
+            alwaysOnTop: true,
+            enableLargerThanScreen: true,
+            skipTaskbar: true,
+            minimizable: false,
+            maximizable: false,
+            webPreferences: {
+                nodeIntegration: true,
+                contextIsolation: false
+            }
+        });
+        $win.loadURL("file://" + require.resolve('react-screenshots/dist/index.html'));
+        return $win;
+    };
+    /**
+     * 绑定ipc时间处理
+     */
+    Screenshots.prototype.listenIpc = function () {
+        var _this = this;
+        /**
+         * OK事件
+         */
+        electron_1.ipcMain.on('SCREENSHOTS::OK', function (e, data) {
+            var event = new event_1.default();
+            _this.emit('ok', event, data);
+            if (!event.defaultPrevented) {
+                electron_1.clipboard.writeImage(electron_1.nativeImage.createFromDataURL(data.dataURL));
+                _this.endCapture();
+            }
+        });
+        /**
+         * CANCEL事件
+         */
+        electron_1.ipcMain.on('SCREENSHOTS::CANCEL', function () {
+            var event = new event_1.default();
+            _this.emit('cancel', event);
+            if (!event.defaultPrevented) {
+                _this.endCapture();
+            }
+        });
+        /**
+         * SAVE事件
+         */
+        electron_1.ipcMain.on('SCREENSHOTS::SAVE', function (e, data) {
+            var event = new event_1.default();
+            _this.emit('save', event, data);
+            if (!event.defaultPrevented) {
+                if (!_this.$win)
+                    return;
+                var time = new Date();
+                var year = time.getFullYear();
+                var month = padStart0_1.default(time.getMonth() + 1);
+                var date = padStart0_1.default(time.getDate());
+                var hours = padStart0_1.default(time.getHours());
+                var minutes = padStart0_1.default(time.getMinutes());
+                var seconds = padStart0_1.default(time.getSeconds());
+                var milliseconds = padStart0_1.default(time.getMilliseconds(), 3);
+                _this.$win.setAlwaysOnTop(false);
+                electron_1.dialog
+                    .showSaveDialog(_this.$win, {
+                    title: '保存图片',
+                    defaultPath: "" + year + month + date + hours + minutes + seconds + milliseconds + ".png"
+                })
+                    .then(function (_a) {
+                    var canceled = _a.canceled, filePath = _a.filePath;
+                    if (!_this.$win)
+                        return;
+                    _this.$win.setAlwaysOnTop(true);
+                    if (canceled || !filePath)
+                        return;
+                    fs_1.default.writeFile(filePath, Buffer.from(data.dataURL.replace(/^data:image\/\w+;base64,/, ''), 'base64'), function (err) {
+                        if (err)
+                            return;
+                        _this.endCapture();
+                    });
+                });
+            }
+        });
+    };
+    return Screenshots;
+}(events_1.default));
+exports.default = Screenshots;

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "electron-screenshots",
+  "version": "0.0.17",
+  "description": "electron 截图插件",
+  "types": "lib/screenshots.d.ts",
+  "main": "lib/screenshots.js",
+  "files": [
+    "lib/**"
+  ],
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "start": "electron lib/index.js",
+    "dev": "tsc --sourceMap --watch",
+    "build": "npm run lint && npm run clean && tsc",
+    "lint": "eslint . --ext .js,.ts --fix",
+    "clean": "rimraf lib"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nashaofu/screenshots.git"
+  },
+  "keywords": [
+    "electron",
+    "shortcut",
+    "capture",
+    "plugin"
+  ],
+  "author": "nashaofu",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/nashaofu/screenshots/issues"
+  },
+  "homepage": "https://github.com/nashaofu/screenshots/tree/master/packages/electron-screenshots#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "react-screenshots": "^0.0.17"
+  },
+  "peerDependencies": {
+    "electron": ">=8"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.23.0",
+    "@typescript-eslint/parser": "^4.23.0",
+    "electron": "^14.0.1",
+    "electron-debug": "^3.2.0",
+    "eslint": "^7.26.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-standard": "^5.0.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.2.4"
+  },
+  "gitHead": "b3f62f6f404aa52ab0fd12509e0ecba492171218"
+}