electron 剪贴板 截图_Electron 截图踩坑和优化集合

上一篇文章《从零开始用 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 = oldCursor

document.body.style.opacity = '1'

// Create hidden video tag

let video = document.createElement('video')

video.style.cssText = 'position:absolute;top:-10000px;left:-10000px;'

// Event connected to stre