上一篇文章《从零开始用 electron 手撸一个截屏工具》发布之后发现阅读的朋友还不少，不过工具真正使用的时候就发现了问题，所以为了让我们的截图工具更好用，就又做了很多优化，当然了也遇到了很多坑。

截屏效果图:

项目修改后的完整代码依然是之前的地址： github.com/chrisbing/e… 欢迎大家关注

接下来就列举一下解决的问题和具体做法

1. 截图一瞬间卡顿问题

先放上一版截图代码

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)
})
复制代码

desktopCapturer.getSources 会导致整个程序挂起，挂起时间与屏幕分辨率、屏幕数量和电脑性能有关。 在自用的 Macbook Pro 外接2K 显示器的情况下截图可以卡住2秒以上，而且鼠标还会出现等待的样式，这个体验是相当差了

所以就需要寻求替代方案了，参考 github.com/electron/el… 和 github.com/electron/el… 这两个 Issue，替代方案有两种，第一种用第三方原生的一些截屏程序，第二种是利用getUserMedia

我选了第二种方法，主要是觉得简单吧。第一种方法大家可以尝试一下，也欢迎反馈结果。

下面附上修改后的代码

    const handleStream = (stream) => {document.body.style.cursor = oldCursordocument.body.style.opacity = '1'// Create hidden video taglet video = document.createElement('video')video.style.cssText = 'position:absolute;top:-10000px;left:-10000px;'// Event connected to streamlet loaded = falsevideo.onloadedmetadata = () => {if (loaded) {return}loaded = true// Set video ORIGINAL height (screenshot)video.style.height = video.videoHeight + 'px' // videoHeightvideo.style.width = video.videoWidth + 'px' // videoWidth// Create canvaslet canvas = document.createElement('canvas')canvas.width = video.videoWidthcanvas.height = video.videoHeightlet ctx = canvas.getContext('2d')// Draw video on canvasctx.drawImage(video, 0, 0, canvas.width, canvas.height)if (this.callback) {// Save screenshot to png - base64this.callback(canvas.toDataURL('image/png'))} else {// console.log('Need callback!')}// Remove hidden video tagvideo.remove()try {stream.getTracks()[0].stop()} catch (e) {// nothing}}video.srcObject = streamdocument.body.appendChild(video)}     // mac 和 windows 获取 chromeMediaSourceId 的方式不同if (require('os').platform() === 'win32') {require('electron').desktopCapturer.getSources({types: ['screen'],thumbnailSize: { width: 1, height: 1 },}, (e, sources) => {let selectSource = sources.filter(source => source.display_id + '' === curScreen.id + '')[0]navigator.getUserMedia({audio: false,video: {mandatory: {chromeMediaSource: 'desktop',chromeMediaSourceId: selectSource.id + '',minWidth: 1280,minHeight: 720,maxWidth: 8000,maxHeight: 8000,},},}, handleStream, handleError)})} else {navigator.getUserMedia({audio: false,video: {mandatory: {chromeMediaSource: 'desktop',chromeMediaSourceId: `screen:${curScreen.id}`,minWidth: 1280,minHeight: 720,maxWidth: 8000,maxHeight: 8000,},},}, handleStream, handleError)}
复制代码

代码有点多，主要也是复制来的。他的原理是用 getUserMedia 来录屏，获取到视频资源，然后将视频绘制到 canvas 上，最后转换成 url。

修改后截屏不会出现整个程序挂起的情况，时间也缩小到600ms 左右，这个时间对于截图来说已经是可以接受的了。

2. 多屏幕支持

当电脑有多个显示器的情况，多屏截图就很重要了，之前只提到了一个屏幕的情况，那多屏应该怎么处理呢？

由于全屏情况，窗口只能占据一个屏幕，所以多屏截图只能用多个截屏窗口来处理了（windows 或许有办法让全屏窗口跨屏显示，待尝试）

首先创建窗口就需要先获取屏幕数量，循环创建

const captureScreen = (e, args) => {if (captureWins.length) {return}const { screen } = require('electron')let displays = screen.getAllDisplays()// 循环创建截屏窗口captureWins = displays.map((display) => {let captureWin = new BrowserWindow({// window 使用 fullscreen,  mac 设置为 undefined, 不可为 falsefullscreen: os.platform() === 'win32' || undefined,width: display.bounds.width,height: display.bounds.height,x: display.bounds.x,y: display.bounds.y,transparent: true,frame: false,movable: false,resizable: false,enableLargerThanScreen: true,hasShadow: false,})captureWin.setAlwaysOnTop(true, 'screen-saver')captureWin.setFullScreenable(false)captureWin.loadFile(path.join(__dirname, 'capture.html'))// 调试用// captureWin.openDevTools()// 一个窗口关闭则关闭所有窗口captureWin.on('closed', () => {let index = captureWins.indexOf(captureWin)if (index !== -1) {captureWins.splice(index, 1)}captureWins.forEach(win => win.close())})return captureWin})}
复制代码

然后每个窗口截取当前屏幕的画面进行操作，获取当前屏幕可以下面的方法

// 因为窗口是全屏的, 所以可以直接用 x, y 来对比
const getCurrentScreen = () => {let { x, y } = currentWindow.getBounds()return screen.getAllDisplays().filter(d => d.bounds.x === x && d.bounds.y === y)[0]
}
复制代码

然后根据问题1的截图代码就可以获取到当前屏幕的截图, 其中chromeMediaSourceId代表的就是屏幕的 ID

改到这里，大体上就差不多了，但是还有个小问题，因为是多个窗口，每个窗口都可以通过拖拽选区图片区域。参考 QQ 在 Mac 上的做法，当一个屏幕有选区了，另一个屏幕上禁止操作

多窗口互通的话，使用了 ipc 通讯。窗口选区后发给 main 进程，main 进程广播给其他窗口，其他窗口接收后禁止操作。

    // main 进程ipcMain.on('capture-screen', (e, { type = 'start', screenId, url } = {}) => {// ...if (type === 'select') {captureWins.forEach(win => win.webContents.send('capture-screen', { type: 'select', screenId }))}})
复制代码

    // renderer 进程ipcRenderer.on('capture-screen', (e, { type, screenId }) => {if (type === 'select') {if (screenId && screenId !== currentScreen.id) {capture.disable()}}})
复制代码

3. Mac 下截取全屏窗口

Mac 下让窗口显示在全屏窗口之上的话，需要一段神奇的代码，当然代码的写法是查搜出来的，但是具体原来还不是很清楚，貌似是一些 hack 的手段吧。

在我这我只能称之为"黑魔法"

下面一段代码放在创建截屏窗口的代码后面

let captureWin = new BrowserWindow({// window 使用 fullscreen,  mac 设置为 undefined, 不可为 falsefullscreen: os.platform() === 'win32' || undefined,width: display.bounds.width,height: display.bounds.height,x: display.bounds.x,y: display.bounds.y,transparent: true,frame: false,movable: false,resizable: false,enableLargerThanScreen: true,hasShadow: false,show: false,})// 黑魔法...app.dock.hide()captureWin.setAlwaysOnTop(true, 'screen-saver')captureWin.setVisibleOnAllWorkspaces(true)captureWin.setFullScreenable(false)captureWin.show()app.dock.show()captureWin.setVisibleOnAllWorkspaces(false)复制代码

经过上面的优化后，这个截图工具已经可以达到产品级了。当然还有一些不足的地方，比如跨屏截图，涂鸦，各种各样的体验细节吧，后面有时间优化完，再来和大家分享！！！