electron實現截圖功能(window+mac同時實現)，以及快捷鍵應用

本片文章中的截圖方式 ：

　　window：應用qq截圖，截圖方式與qq無異，截完圖之后可編輯操作；

　　mac：  調用系統截圖

　　qq截圖工具地址： https://github.com/17326953721/qqScreenshot.git

截圖：

1.window截圖：

  import { execFile } from "child_process";

  const isDevelopment = process.env.NODE_ENV !== "development" ;

const path = require("path");
let url = path.resolve(__dirname, "./../static/qq/PrintScr.exe");

if (isDevelopment && !process.env.IS_TEST) {
　　// 生產環境
　　url = path.join(__dirname, "../../extraResources/PrintScr.exe");
}
let screen_window = execFile(url);
screen_window.on("exit", (code) => {
　　if (code) {
　　　　//截圖完成，已經在粘貼板中
　　}
});

上面的生產環境的路徑需要在package.json中進行配置，不然的話打包完成之后找不到文件地址，導致截圖失敗，配置如下：

"extraResources": [
　　{
　　　　"from": "./static/qq/PrintScr.exe",
　　　　"to": "./extraResources/PrintScr.exe"
　　},
　　{
　　　　"from": "./static/qq/PrScrn.dll",
　　　　"to": "./extraResources/PrScrn.dll"
　　}
],

2.mac截圖： 

const child_process = require("child_process");
child_process.exec(`screencapture -i -c`,  (error, stdout, stderr) => {
　　console.log("308", error);
　　if (!error) {
　　　　//截圖完成，在粘貼板中
　　}
});

screencapture 是mac中的命令，可以通過終端輸入進行截圖，后綴命令：

-c 強制截圖保存到剪貼板而不是文件中
-C 截圖時保留光標（只在非交互模式下有效）
-d display errors to the user graphically（不知道啥意思）
-i 交互模式截取屏幕。可以是選區或者是窗口。按下空格可切換截屏模式
-m 只截取主顯示器（-i模式下無效）
-M 截圖完畢后，會打開郵件客戶端，圖片就躺在郵件正文中
-o 在窗口模式下，不截取窗口的陰影
-P 截圖完畢后，在圖片預覽中打開
-s 只允許鼠標選擇模式
-S 窗口模式下，截取屏幕而不是窗口
-t png 指定圖片格式，模式是png。可選的有pdf, jpg, tiff等
-T 延時截取，默認為5秒。
-w 只允許窗口截取模式
-W 開始交互截取模式，默認為窗口模式（只是默認模式與-i不同）
-x 不播放聲效
-a do not include windows attached to selected windows（不懂）
-r 不向圖片中加入dpi信息
-l<windowid> 抓取指定windowid的窗口截圖
-R<x,y,w,h> 抓取指定區域的截圖
-B<bundleid> 截圖輸出會被bundleid指出的程序打開
-U 打開截屏操作版   //我這邊使用-U，會報錯

 

到此截圖已完成，因為截下來的圖片，是二進制數據，需要轉成圖片格式，從剪貼板中解析圖片，如下：

import { clipboard } from "electron";   //調用electron方法獲取剪貼板內容
clipboardParsing() {
　　let pngs = clipboard.readImage().toPNG();   //可改變圖片格式，如：toJPEG
　　let imgData = new Buffer(pngs, "beas64");
　　let imgs = "data:image/png;base64," +
　　　　btoa(new Uint8Array(imgData).reduce(
　　　　　　(data, byte) => data + String.fromCharCode(byte), "")
　　　　);
　　let mytextarea = document.getElementById("mytextarea");
　　let screenshotImg = document.createElement("img");
　　//imgs 為base64格式
　　screenshotImg.src = imgs;
　　screenshotImg.style.maxHeight = "70px";
　　screenshotImg.style.maxWidth = "200px";
　　mytextarea.appendChild(screenshotImg);
},

 所有代碼：

 import { execFile } from "child_process";

 const isDevelopment = process.env.NODE_ENV !== "development";

 const path = require("path");

 const child_process = require("child_process");

execFileWay() {
　　if (process.platform == "darwin") {  //判斷當前操作系統，"darwin" 是mac系統     "win32" 是window系統
　　　　child_process.exec(`screencapture -i -c`,(error, stdout, stderr) => {　　　　　　if (!error) {
　　　　　　　　this.clipboardParsing();
　　　　　　}
　　　　});
　　} else {
　　　　let url = path.resolve(__dirname, "../../../../../static/qq/PrintScr.exe");
　　　　if (isDevelopment && !process.env.IS_TEST) {
　　　　　　// 生產環境
　　　　　　url = path.join(__dirname, "../../../../extraResources/PrintScr.exe" );
　　　　}
　　　　let screen_window = execFile(url);
　　　　screen_window.on("exit", (code) => {
　　　　　　if (code) {
　　　　　　　　this.clipboardParsing();
　　　　　　}
　　　　});
　　}
}

 

快捷鍵（window）

import { app, Menu, BrowserWindow, ipcMain,Tray, BrowserView, globalShortcut } from 'electron'
import { execFile } from 'child_process';
const isDevelopment = process.env.NODE_ENV !== "development";
const path = require('path');
//截圖快捷鍵
export const screenshots = () => {
    return globalShortcut.register('CommandOrControl+Shift+L', () => {
        let url = path.resolve(__dirname, "../../static/qq/PrintScr.exe");
        if (isDevelopment && !process.env.IS_TEST) {
            // 生產環境
            url = path.join(__dirname, '../../../extraResources/PrintScr.exe');
        }
        let screen_window = execFile(url);
　　})
}