電子機器でデスクトップ画面の領域を選択

Question

私は、ユーザーが画面の領域を選択できるようにする（スクリーンショットをとるなど）アプリケーションを作成しようとしています。

はあっても可能ですか？

Answer 1

具体的にフルスクリーンショットを撮るには、次のコードを使用してください（例：Electron Demo Appから取得）。この例では、電子アプリで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 
    } 
} 

他の方法があります。これは彼らが何であるかの予備知識を必要とするが、DOMで

1. 使用object.getClientRects()は、キャプチャする特定の要素を指定します。
2. mouseClick、mouseMoveなどで、必要なものの形状を '描画'するために、イベントリスナーを追加します。このstack overflow questionには、あなたがやりたいことに合わせて適応できる回答があります。