+
Take a Screenshot
+
Supports: Win, macOS, Linux | Process: Renderer
+
+
+
+
+
+
+
This demo uses the desktopCapturer module to gather screens in use and select the entire screen and take a snapshot of what is visible.
+
Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.
+
+
+
+
+
diff --git a/docs/fiddles/media/screenshot/take-screenshot/main.js b/docs/fiddles/media/screenshot/take-screenshot/main.js
new file mode 100644
index 000000000000..37adb5d2b92e
--- /dev/null
+++ b/docs/fiddles/media/screenshot/take-screenshot/main.js
@@ -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()
+})
diff --git a/docs/fiddles/media/screenshot/take-screenshot/renderer.js b/docs/fiddles/media/screenshot/take-screenshot/renderer.js
new file mode 100644
index 000000000000..144e7827a205
--- /dev/null
+++ b/docs/fiddles/media/screenshot/take-screenshot/renderer.js
@@ -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
+ }
+}