mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

docs: add example for taking screenshot (#20531)

Browse source
This commit is contained in:
Harendra Singh 2019-10-16 20:47:50 +05:30 • committed by Shelley Vohr
commit db91673f23
3 changed files with 93 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

25
docs/fiddles/media/screenshot/take-screenshot/index.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<h3>Take a Screenshot</h3>
<i>Supports: Win, macOS, Linux <span>|</span> Process: Renderer</i>
<div>
<div>
<div>
<button id="screen-shot">View Demo</button>
<span id="screenshot-path"></span>
</div>
<p>This demo uses the <code>desktopCapturer</code> module to gather screens in use and select the entire screen and take a snapshot of what is visible.</p>
<p>Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.</p>
</div>
</div>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>

25
docs/fiddles/media/screenshot/take-screenshot/main.js Normal file
View file

@ -0,0 +1,25 @@
const { BrowserWindow, app } = require('electron')
let mainWindow = null
function createWindow () {
const windowOptions = {
width: 600,
height: 300,
title: 'Take a Screenshot',
webPreferences: {
nodeIntegration: true
}
}
mainWindow = new BrowserWindow(windowOptions)
mainWindow.loadFile('index.html')
mainWindow.on('closed', () => {
mainWindow = null
})
}
app.on('ready', () => {
createWindow()
})

43
docs/fiddles/media/screenshot/take-screenshot/renderer.js Normal file
View file

@ -0,0 +1,43 @@
const { desktopCapturer } = require('electron')
const { screen, shell } = require('electron').remote
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', (event) => {
screenshotMsg.textContent = 'Gathering screens...'
const thumbSize = determineScreenShotSize()
const options = { types: ['screen'], thumbnailSize: thumbSize }
desktopCapturer.getSources(options, (error, sources) => {
if (error) return console.log(error)
sources.forEach((source) => {
const sourceName = source.name.toLowerCase()
if (sourceName === 'entire screen' || sourceName === '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 = `Saved screenshot to: ${screenshotPath}`
screenshotMsg.textContent = message
})
}
})
})
})
function determineScreenShotSize () {
const screenSize = screen.getPrimaryDisplay().workAreaSize
const maxDimension = Math.max(screenSize.width, screenSize.height)
return {
width: maxDimension * window.devicePixelRatio,
height: maxDimension * window.devicePixelRatio
}
}