Electron.NET/ElectronNET.WebApp/Views/DesktopCapturer/Index.cshtml

<template class="task-template">
  <section id="desktop-capturer-section" class="section js-section u-category-media">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-media"></use></svg>
          Take a screenshot
        </h1>
        <h3>The <code>desktopCapturer</code> module in Electron can be used to access any media, such as audio, video, screen and window, that is available through the <code>getUserMedia</code> web API in Chromium.</h3>

        <p>Open the <a href="http://electron.atom.io/docs/api/desktop-capturer">full API documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="print-pdf-demo-toggle" class="js-container-target demo-toggle-button">Take a Screenshot
          <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux | Process: Renderer</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="screen-shot">View Demo</button>
            <span class="demo-response is-selectable" 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>
          <h5>Renderer Process (JavaScript)</h5>
          <pre><code class="javascript">const electron = require('electron');
const desktopCapturer = electron.desktopCapturer;
const electronScreen = electron.screen;
const shell = electron.shell;

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', function (event) {
    screenshotMsg.textContent = 'Gathering screens...';
    const thumbSize = determineScreenShotSize();
    let options = { types: ['screen'], thumbnailSize: thumbSize }

    desktopCapturer.getSources(options, function (error, sources) {
        if (error) return console.log(error);

        sources.forEach(function (source) {
            if (source.name === 'Entire screen' || source.name === 'Screen 1') {
                const screenshotPath = path.join(os.tmpdir(), 'screenshot.png');

                fs.writeFile(screenshotPath, source.thumbnail.toPng(), function (error) {
                if (error) return console.log(error);
                shell.openExternal('file://' + screenshotPath);
                const message = `Saved screenshot to: ${screenshotPath}`;
                screenshotMsg.textContent = message;
                });
            }
        })
    })
})

function determineScreenShotSize () {
    const screenSize = electronScreen.getPrimaryDisplay().workAreaSize;
    const maxDimension = Math.max(screenSize.width, screenSize.height);
    return {
        width: maxDimension * window.devicePixelRatio,
        height: maxDimension * window.devicePixelRatio
    }
}</code></pre>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      (function(){
          
            const electron = require('electron');
            const desktopCapturer = electron.desktopCapturer;
            const electronScreen = electron.screen;
            const shell = electron.shell;

            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', function (event) {
                screenshotMsg.textContent = 'Gathering screens...';
                const thumbSize = determineScreenShotSize();
                let options = { types: ['screen'], thumbnailSize: thumbSize }

                desktopCapturer.getSources(options, function (error, sources) {
                    if (error) return console.log(error);

                    sources.forEach(function (source) {
                        if (source.name === 'Entire screen' || source.name === 'Screen 1') {
                            const screenshotPath = path.join(os.tmpdir(), 'screenshot.png');

                            fs.writeFile(screenshotPath, source.thumbnail.toPng(), function (error) {
                            if (error) return console.log(error);
                            shell.openExternal('file://' + screenshotPath);
                            const message = `Saved screenshot to: ${screenshotPath}`;
                            screenshotMsg.textContent = message;
                            });
                        }
                    })
                })
            })

            function determineScreenShotSize () {
                const screenSize = electronScreen.getPrimaryDisplay().workAreaSize;
                const maxDimension = Math.max(screenSize.width, screenSize.height);
                return {
                    width: maxDimension * window.devicePixelRatio,
                    height: maxDimension * window.devicePixelRatio
                }
            }

            }());
    </script>

  </section>
</template>