Skip to main content

截图功能

常见方案​

方案1​

通过desktopCapturer.getSourcesAPI

image-20220127004121094

image-20220127004225127

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

方案2​

通过navigator.getUserMedia API

image-20220127004254740

image-20220127004337944

image-20220127004349828

用 getUserMedia 来录屏，获取到视频资源，然后将视频绘制到 canvas 上，最后转换成 url。

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

方案3​

capture-for-QQ

  • 通过命令行执行.exe文件去调用dll

image-20220127004612489

const libPath = path.join(__dirname, 'capture.exe').replace('app.asar', 'app.asar.unpacked');

    clipboard.clear();

    const exec = require('child_process').execFile;
    exec(libPath, (err, stdout, stderr) => {
      if (err) log.error('capture error', err);
      log.info('capture finished', clipboard.readImage().isEmpty());

      const image = clipboard.readImage();
      if (!image.isEmpty()) {
          // 传给UI层处理
      }
    })
  },

将exe和dll文件打包到app.asar.unpacked目录下，通过绝对路径去执行。exe和dll是网上找的的，调用并不复杂。

  • 调用native代码编译的.node文件

  • 通过node-ffi、edge-atom-shell等模块，在nodejs中直接写C++代码调用dll

扩展阅读​

备注​

  • 隐藏窗口

    截图功能有时需要隐藏窗口后截图，但是electron的窗口最小化方法在最小化时有一个动画延迟，所以这里需要对进行延迟处理，一般来说放到setTimeout中就好了