與Electron選擇桌面屏幕的區域

Question

我正在嘗試編寫一個允許用戶選擇屏幕區域的應用程序（如選擇拍攝屏幕截圖）。

是，即使可能嗎？

Answer 1

要專門拍攝全屏幕照片，請使用以下代碼（從Electron Demo App中拉出示例）。您可以構建此示例，並使用electron api中的screen,desktopCapturer和rectangle模塊自定義代碼以獲取特定的屏幕/顯示，或選擇特定的邊界框（x/y座標和像素區域）。

const electron = require('electron') 
const desktopCapturer = electron.desktopCapturer 
const electronScreen = electron.screen 
const shell = electron.shell 

const fs = require('fs') 
const os = require('os') 
const path = require('path') 

const screenshot = document.getElementById('screen-shot') 
const screenshotMsg = document.getElementById('screenshot-path') 

screenshot.addEventListener('click', function (event) { 
    screenshotMsg.textContent = 'Gathering screens...' 
    const thumbSize = determineScreenShotSize() 
    let options = { types: ['screen'], thumbnailSize: thumbSize } 

    desktopCapturer.getSources(options, function (error, sources) { 
    if (error) return console.log(error) 

    sources.forEach(function (source) { 
     if (source.name === 'Entire screen' || source.name === 'Screen 1') { 
     const screenshotPath = path.join(os.tmpdir(), 'screenshot.png') 

     fs.writeFile(screenshotPath, source.thumbnail.toPng(), function (error) { 
      if (error) return console.log(error) 
      shell.openExternal('file://' + screenshotPath) 
      const message = `Saved screenshot to: ${screenshotPath}` 
      screenshotMsg.textContent = message 
     }) 
     } 
    }) 
    }) 
}) 

function determineScreenShotSize() { 
    const screenSize = electronScreen.getPrimaryDisplay().workAreaSize 
    const maxDimension = Math.max(screenSize.width, screenSize.height) 
    return { 
    width: maxDimension * window.devicePixelRatio, 
    height: maxDimension * window.devicePixelRatio 
    } 
} 

，你可以去這個問題的其他途徑有：

1. 使用object.getClientRects()在DOM來指定要捕獲特定的元素，儘管這將需要它們是什麼先見之明。
2. 在您的視圖中添加事件偵聽器，通過mouseClick，mouseMove等「繪製」您想要的形狀。此stack overflow question的答案可以根據您的需要進行調整。