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);
　　})
}