【electron學習筆記】如何在electron內建截屏功能

背景

前段時間一直在做一款 electron 的 IM 聊天應用，其中需要實作 “截屏并發送截屏檔案” 的功能。是以，翻閱了資料并且進行了對比研究，發現有兩種可以實作的方案，下面來給大家介紹一下。

一、electron 自帶的API：desktopCapture

這種方法是最簡單易用的，但由于 electron 是自帶的，對其要求不能太高，隻能單純地把整個螢幕截圖傳回，而且可能會有一些卡頓。

範例代碼如下：

// In the renderer process.
const { desktopCapturer } = require('electron')

desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
  for (const source of sources) {
    if (source.name === 'Electron') {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: false,
          video: {
            mandatory: {
              chromeMediaSource: 'desktop',
              chromeMediaSourceId: source.id,
              minWidth: 1280,
              maxWidth: 1280,
              minHeight: 720,
              maxHeight: 720
            }
          }
        })
        handleStream(stream)
      } catch (e) {
        handleError(e)
      }
      return
    }
  }
})      

有興趣的小夥伴，可以檢視一下​​API文檔​​。

二、內建截圖軟體：exe

在百度找了兩款能使用的截圖應用程式（連結分享在文章尾部），利用 node 的child_process 的 execFile 方法啟動應用，并在應用關閉的時候去擷取粘貼闆上的圖檔。

具體代碼如下：

1、啟動應用，并監聽應用關閉

let imageObj: any;
const child = execFile(exeurl, ['--unhandled-rejections=strict'], (error: any, stdout: any, stderr: any) => {
    console.log('ERROR', error, stdout, stderr);
    if (error) {
        console.log('系統錯誤或取消截圖');
        return 
    }
    let imageObj: any = clipboard.readImage();
    if(!imageObj.isEmpty()) {
        imageObj = imageObj.toDataURL();
        if(imageObj !== oldShotImg) {
            oldShotImg = imageObj;
        }
    }
});      

這裡會有一個問題：啟動應用之後，使用者可以取消截圖，就是我們在應用關閉之後，可能會出現 “取不到截圖” 或者 “取到的截圖跟上一次截圖一樣” 的情況。

為了解決這個問題，就需要先判斷粘貼闆是否有圖檔（這個很好處理，可參考 electron 的API）。

另外，可以先存儲上一次的截圖，然後跟最新的做對比，不一樣的才是現有的。

總結

總的來說，兩種方式都是可以實作截圖的，但實作效果是不一樣的。

第一種是簡單簡約型，基本就是生成截圖。

第二種是根據所采用應用程式的功能豐富程度而定，類似我找到的兩款應用，基本上涵蓋了像QQ截圖的所有功能，例如：截圖之後的标點、圈圈、注釋、儲存等功能，相對豐富，使用上也是比較簡單的。

最終選擇哪種方式，我們還是要看具體項目的需求而定，個人會比較傾向第二種方式。

1、https://www.qqxiazai.com/down/44428.html
2、https://dl.pconline.com.cn/download/2272902.html