基于 Electron 开发的截屏软件.
全局安装 uglify-js (若已安装, 可忽略该步骤).
npm i -g uglify-jsnpm i @financial-freedom/electron-screenshot/**
* 主进程 main.js
*/
// 引入模块
const { useCapture } = require('@jsoon/electron-screenshot');
// 创建窗口
const mainWindow = new BrowserWindow({
// Options
// ...
});
// 使用截屏
useCapture({
mainWindow
});npm run start# 打包 mac
npm run dist:mac
# 打包 win
npm run dist:win构建前请先看这里, 解决构建源下载超时的问题.
- 截屏图片复制到剪切板
- 截屏选区重置
- 截屏图片下载
- 截屏退出
- 鼠标跟随信息 (当前坐标, 当前屏幕取色)
- 矩形框工具
- 椭圆形框工具
- 箭头工具
- 画笔工具
- 马赛克工具 🤩
- 文字工具
- 撤销工具 🤩
- 截图图片鼠标无法隐藏
-
[Mac-10.13.6] 截屏窗口打开后, 由于是simpleFullscreen状态, 系统菜单栏会被隐藏, 退出截屏后仍然处于隐藏状态(已使用非全屏方式规避) - Mac 下构建 Windows 报错: exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
- 其他兼容性问题待测试
⚠️ 若 canvas 不需要在 Node 环境下运行 (即 Electron 应用主线程), 则无需考虑构建 node-canvas 原生模块构建. 本项目 canvas 运行在渲染进程, 故无需进行原生模块构建.
Windows 下进行 node-canvas 原生模块构建时, 由于 Node, Electron 版本的不同, 可能会导致很多棘手的问题, 这些问题多是涉及到 c++ 和 v8, 因而对于前端开发者而言, 很难定位和解决.
若还不知道如何搭建 node-canvas 原生模块构建环境, 请参考这里.
解决方案如下, 修改 node_modules/canvas/src/util.h 代码:
// Line 31
return c1 == c2 || std::toupper(c1) == std::toupper(c2);修改为:
// std:: -> ::
return c1 == c2 || ::toupper(c1) == ::toupper(c2);Canvas.obj : error LNK2001: unresolved external symbol "__declspec(dllimport) public: class std::shared_ptr<class v8::BackingStore> __cdecl v8::ArrayBuffer::GetBackingStore(void)
解决方案如下, 修改 node_modules/nan/nan_typedarray_contents.h 代码:
// Line 36 - 40
#if (V8_MAJOR_VERSION >= 8)
data = static_cast<char*>(buffer->GetBackingStore()->Data()) + byte_offset;
#else
data = static_cast<char*>(buffer->GetContents().Data()) + byte_offset;
#endif修改为:
// 去掉判断
data = static_cast<char*>(buffer->GetContents().Data()) + byte_offset;