窗口需要覆盖全屏, 并且完全置顶, 在 windows 下可以使用 fullscreen 来保证全屏, Mac 下 fullscreen 会把窗口移到单独桌面, 所以采用了另外的办法, 代码注释上标注了不同系统的相关选项, 具体内容可以查看文档
注意这里窗口加载了另外一个 html 文件, 这个文件用来负责截屏和裁剪的一些交互工作
capture.html
首先 html 结构
// capture.html <div></div> <div></div> <canvas></canvas> <div></div> <div> <div></div> <div></div> <div></div> <div></div> </div> <script src="https://www.jb51.net/capture-renderer.js"></script>
Bg : 截屏图片 Mask : 一层灰色遮罩 Canvas : 绘制选中的图片区域和边框 Size info : 标识截取范围的尺寸 Toolbar : 操作按钮, 用来取消和保存等 capture-renderer.js : js 代码
@import "./assets/iconfont/iconfont.css"; html, body, div { margin: 0; padding: 0; box-sizing: border-box; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .image-canvas { position: absolute; display: none; z-index: 1; } .size-info { position: absolute; color: #ffffff; font-size: 12px; background: rgba(40, 40, 40, 0.8); padding: 5px 10px; border-radius: 2px; font-family: Arial Consolas sans-serif; display: none; z-index: 2; } .toolbar { position: absolute; color: #343434; font-size: 12px; background: #f5f5f5; padding: 5px 10px; border-radius: 4px; font-family: Arial Consolas sans-serif; display: none; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); z-index: 2; align-items: center; } .toolbar .iconfont { font-size: 24px; padding: 2px 5px; }
各个元素基本为 absolute 定位, 由 js 控制位置 按钮使用了 iconfont , 所有涉及到的资源文件和完整项目可以到 GitHub - chrisbing/electorn-capture-screen: electron capture screen 中下载
截图交互
完成的功能有截取指定区域图片, 拖拽移动和改变选区尺寸, 实时尺寸显示和工具条
获取屏幕截图
// capture-renderer.js const { ipcRenderer, clipboard, nativeImage, remote, desktopCapturer, screen } = require('electron') const Event = require('events') const fs = require('fs') const { bounds: { width, height }, scaleFactor } = screen.getPrimaryDisplay() const $canvas = document.getElementById('js-canvas') const $bg = document.getElementById('js-bg') const $sizeInfo = document.getElementById('js-size-info') const $toolbar = document.getElementById('js-toolbar') const $btnClose = document.getElementById('js-tool-close') const $btnOk = document.getElementById('js-tool-ok') const $btnSave = document.getElementById('js-tool-save') const $btnReset = document.getElementById('js-tool-reset') console.time('capture') desktopCapturer.getSources({ types: ['screen'], thumbnailSize: { width: width * scaleFactor, height: height * scaleFactor, } }, (error, sources) => { console.timeEnd('capture') let imgSrc = sources[0].thumbnail.toDataURL() let capture = new CaptureRenderer($canvas, $bg, imgSrc, scaleFactor) })
screen.getPrimaryDisplay() 可以获取主屏幕的大小和缩放比例, 缩放比例在高分屏中适用, 在高分屏中屏幕的物理尺寸和窗口尺寸并不一致, 一般会有2倍3倍等缩放倍数, 所以为了获取到高清的屏幕截图, 需要在屏幕尺寸基础上乘以缩放倍数
desktopCapturer 获取屏幕截图的图片信息, 获取的是一个数组, 包含了每一个屏幕的信息, 这里呢暂时只处理了第一个屏幕的信息
获取了截图信息后创建 CaptureRenderer 进行交互处理
CaptureRenderer