Created
October 10, 2019 20:48
-
-
Save harryi3t/b528a6d5d920b10fb768c899be9813c5 to your computer and use it in GitHub Desktop.
Electron Fiddle Gist
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { BrowserWindow, app } = require('electron') | |
| let mainWindow = null | |
| function createWindow () { | |
| const windowOptions = { | |
| width: 600, | |
| height: 300, | |
| title: 'Desktop Capturer', | |
| webPreferences: { | |
| nodeIntegration: true | |
| } | |
| } | |
| mainWindow = new BrowserWindow(windowOptions) | |
| mainWindow.loadFile('index.html') | |
| mainWindow.on('closed', () => { | |
| mainWindow = null | |
| }) | |
| } | |
| app.on('ready', () => { | |
| createWindow() | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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() | |
| let 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 | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment