Skip to content

electron 截图软件开发任务拆解

性能和原生开发一致,使用 electron C++ Addon 的方式开发截图

提示

本课程,是 Electron 高级课程,将会默认你有一定的前端、Node.js 以及 electron 开发经验。

开发过程中不会过多介绍基础知识,而是直接使用相关知识解决具体的问题。

Electron 与 Node.js 基础知识

  1. 截屏功能演示以及实现原理、代码讲解

  2. 环境配置 - Windows 安装 VS2020

    • 运行课程最终的实现效果例子
  3. Node.js 截屏获取屏幕图片

  4. Node.js 内存共享读写 - 多进程、线程的应用

  5. 获取电脑所有的窗口的以及对应的坐标(包含任务栏、系统托盘) - 引入句柄的概念

  6. koffi 快速入门 - electron 快速入门-创建屏幕窗口并把窗口显示在对应的屏幕上

  7. electron 把截屏代码引入到 electron 项目中,并且获取屏幕显示在窗口上

  8. 使用 worker 优化截屏速度

  9. 引入内存共享 - 使用内存共享优化进程间通信 - 读写图片

    • (Node.js 内存共享并不支持主进程、渲染进程)
  10. 使用 Canvas 绘制矩形截图并实现复制、保存到本地功能

  11. electron 获取坐桌面窗口以及 koffi 获取窗口坐标 - 实现窗口识别功能

  12. electron 系统托盘菜单开发

  13. electron-builder 打包配置 - 自定义配置文件方式

  14. electron 应用单例模式,点击图标也可以实现截图

  15. electron - 内存泄漏排查和修复, gc 垃圾回收实际应用

  16. electron 多环境打包配置 - 不同的环境打包名称不一样


  1. 系统托盘 - 设置窗口开发 - 支持自定义快捷键和应用自启动

  2. electron 自动更新 - 通过自定义下载的方式(类似与剪映、直播伴侣)