[Capture screenshot] implement capture screenshot in electron #electron #node

capture-screenshot.js

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

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

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

screenshot.addEventListener('click', (event) => {
  screenshotMsg.textContent = 'we are still working ...'
  const thumbSize = determineScreenShotSize()
  let options = { 
    types: ['screen'], 
    thumbnailSize: thumbSize 
  }

  desktopCapturer.getSources(options, (error, sources) => {
    if (error) return console.log(error)
    sources.forEach((source) => {
      // TODO: source.name is not determined
      // use some other condition to decide use which screen(user may have multi screen) or full screen
      if (source.name === 'Entire screen' || source.name === 'Screen 1') {
        const screenshotPath = path.join(os.tmpdir(), 'screenshot.png')
        fs.writeFile(screenshotPath, source.thumbnail.toPng(), (error) => {
          if (error) return console.log(error)
          shell.openExternal('file://' + screenshotPath)
          const message = `Screenshot saved: ${screenshotPath}`
          screenshotMsg.textContent = message
        })
      }
    })
  })
})