6

I'm trying to write an application that allow the user to select a region of the screen (like selecting to take a screen shot).

folders in home

Is that even possible?

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
Med Abida
  • 1,214
  • 11
  • 31
  • Not enough information here on the context. Do you just want to draw a selection rect on screen? And what is the "screen" is the context of an Electron app: the main window? The users' desktop? – spring Mar 01 '17 at 00:46
  • 1
    @NoGrabbing "Like selecting to take a screenshot". Like Snipping tool. He doesn't mean a specific location on the PC. – Joshua Mar 01 '17 at 08:10
  • like the concept of taking a screenshot, it could be done anywhere. – Med Abida Mar 01 '17 at 10:11
  • 1
    Have a look at the source of my app Pussh. We do exactly this by taking a screenshot and using a fullscreen window with a little js to fake the macOS screenshot tool. https://github.com/teak/Pussh – Max Mar 02 '17 at 02:39
  • @Teak thanks for your response ! can u elaborate more on how ur app is working , are you using some sort of listener every time the user take a screenshot or are you drawing the selection from scratch, for my app to do wht it have to do , i need to draw the selection part all from scratch cauz i need to do some realtime processing as log as the user starts selecting – Med Abida Mar 02 '17 at 08:01
  • Its a global keyboard shortcut to trigger it. – Max Mar 02 '17 at 17:55
  • I dont think u get wht i meant – Med Abida Mar 02 '17 at 17:56

2 Answers2

10

To specifically take a full screen shot, use the following code (example pulled from Electron Demo App). You can build off of this example, and use the screen, desktopCapturer and rectangle modules in the electron api to customize the code to get a specific screen/display, or select a specific bounding box (x/y coordinates and pixel area). 

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
  }
}

Other ways you could go about this are:

  1. Use object.getClientRects() in the DOM to specify specific elements you want to capture, although this would require foreknowledge of what they are.
  2. Add event listeners in your view to 'draw' the shape of what you want with mouseClick, mouseMove, etc. This stack overflow question has answers which could be adapted to fit what you want to do.
Community
  • 1
  • 1
unseen_damage
  • 1,346
  • 1
  • 14
  • 32
  • thanks, ill check it out and see if it solves my question, in the meanwhile if you help me out achieving the mouse selection part(like the photo in the question) that would be awesome, – Med Abida Mar 03 '17 at 08:11
  • @unseen_damage I didn't downvote but I know why others did. The question is mainly for "how to select" but your answer covered very little about "select". – Tyler Liu Nov 07 '21 at 03:59
4

I doubt you are still looking for a solution to this, but after digging i have found a way to do it using a combination of shelljs and clipboard.

  const userDataPath = (app).getPath(
    'userData'
  )
  const useP = path.join(userDataPath, 'uploads')
  let randomTmpfile = uniqueFilename(useP, 'prefix')
  shelljs.exec(`screencapture -ic ${randomTmpfile}.png`, function (res) {
    const image = clipboard.readImage('png').toDataURL()
  })
Devon Ray
  • 401
  • 4
  • 12