与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的答案可以根据您的需要进行调整。