electron 的一个截图插件工具
测试案例 下载之后 全局安装 electron $ npm i electron -g 文件结构开发版本的桌面应用 https://github.com/chong0808/shotScreen/releases/tag/v1.0
├── dist // 生成的文件
│ ├── setup
│ │ ├── build // 安装包资源
│ │ └── shotscreen-win32-x64 // 打包的文件
│ └── web // 渲染进程引入的文件
│ └── shotScreen.js // web页面需要引入的文件
├── src // 插件主要文件
│ ├── mainProcess
│ │ └── index.js // 主要负责通讯
│ ├── webScripts // web页面引用文件
│ │ └── index.js
│ ├── index.html // 后台隐藏的常驻渲染进程
│ ├── index.js // 接收信号
│ ├── main.js // 应用启动文件
│ └── renderProcess // 渲染进程引入的文件
│ ├── asset // 资源文件
│ ├── index.html // 创建截图渲染进程的文件
│ └── main.js // 创建截图渲染进程中 对图片剪切操作的文件 主要就是canvas的操作
├── README.md
└── package.json
开发模式 使用方式
$ npm start // 1.启动一个测试环境web服务器 2. 启动主应用程序
##### 打开 http://localhost:8080/
文档 使用方式 安装包资源 shotscreen setup.exe 安装之后 默认全局截图快捷键 Ctrl+Alt+D web页面引入资源包 shotScreen.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="shotScreen">截图</button>
<button id="changeKey">修改配置</button>
<script type="text/javascript" src="app.js"></script><script type="text/javascript" src="shotScreen.js"></script></body>
</html>
或者
const shotScreen = require("./src/webScripts")
const btn = document.getElementById("shotScreen");
const changeKey = document.getElementById("changeKey");
btn.addEventListener("click",function () {
shotScreen.sendMsg(function (data) {
console.log(data)
})
})
changeKey.addEventListener("click", function () {
shotScreen.sendChangeKey({ shotKey: "ctrl+A", cancelShot:"ctrl+Z"})
})
全局暴露 window.clipscreen
/**
* 发送截图命令 返回保存的路径跟base64的信息
* @param {Function} callback
* @return {Object}
* {
* type:"close",
* message:{
* base64:"data:image/png;base64,iVBORw0KGgoAAA",
* path:"C:\Users\z_chong\Desktop\jietu.jpg"
* }
* }
*/
/**
* 修改配置
* @param {Object} options
*
* var options = {
* shotKey:"", // default 'Esc'
* cancelShot:"", // default 'ctrl+shift+d'
*
* }
* sendChangeKey(options)
*
*/
window.clipscreen = {
sendMsg: sendMsg,
sendChangeKey: sendChangeKey
}
module.exports = exports = {
sendMsg: sendMsg,
sendChangeKey: sendChangeKey
};
TODO LIST
1. 打包应用app
2. 应用自动启动
3. 应自动更新
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
