docs: add example for taking screenshot (#20531)

electron · Oct 16, 2019 · db91673 · db91673
1 parent c73e34f
commit db91673
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 0 deletions.
diff --git a/docs/fiddles/media/screenshot/take-screenshot/index.html b/docs/fiddles/media/screenshot/take-screenshot/index.html
@@ -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>
diff --git a/docs/fiddles/media/screenshot/take-screenshot/main.js 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
@@ -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
+  }
+}