From db91673f2357aaf6af84391d906e278096ac4e5b Mon Sep 17 00:00:00 2001 From: Harendra Singh Date: Wed, 16 Oct 2019 20:47:50 +0530 Subject: [PATCH] docs: add example for taking screenshot (#20531) --- .../screenshot/take-screenshot/index.html | 25 +++++++++++ .../media/screenshot/take-screenshot/main.js | 25 +++++++++++ .../screenshot/take-screenshot/renderer.js | 43 +++++++++++++++++++ 3 files changed, 93 insertions(+) create mode 100644 docs/fiddles/media/screenshot/take-screenshot/index.html create mode 100644 docs/fiddles/media/screenshot/take-screenshot/main.js create mode 100644 docs/fiddles/media/screenshot/take-screenshot/renderer.js diff --git a/docs/fiddles/media/screenshot/take-screenshot/index.html b/docs/fiddles/media/screenshot/take-screenshot/index.html new file mode 100644 index 000000000000..264899abddea --- /dev/null +++ b/docs/fiddles/media/screenshot/take-screenshot/index.html @@ -0,0 +1,25 @@ + + + + + + +
+

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