Now that we have a thumbnail image, we need to perform two additional steps before saving it to local storage:

1. The first thing we need to do is resize the image so that it fits the screen size. As you may recall, we make a square image based on the maximum dimension, which is based on either the screen's height or the screen's width. It is easy to resize the NativeImage instance because you already have a dedicated resize method for this very purpose.
2. The second step is to crop the image. When we take a screenshot of the whole screen area, our users may only want a portion of the screen or a frameless and transparent window. Therefore, we need to crop it and leave only the rectangle based on the window boundaries.

The NativeImage class allows us to perform method chaining. This allows us to call multiple methods before we convert the final result into PNG format:

const image = entireScreenSource.thumbnail
          .resize({
            width: screenSize.width,
            height: screenSize.height
          })
          .crop({
            x: window.screenLeft,
            y: window.screenTop,
            width: window.innerWidth,
            height: window.outerHeight
          })
          .toPNG();

We can improve our code slightly by getting access to the application window from the web renderer side. This means that we can access window boundaries, as well as manipulate the window's state. Let's look at an example:

const { remote } = window.require('electron');

const win = remote.getCurrentWindow();
const windowRect = win.getBounds();

As you can see, we are accessing the remote object and fetching the current application window. After that, it's easy to get the bounds rectangle and pass it to the crop method, as shown in the following code:

const image = entireScreenSource.thumbnail
          .resize({
            width: screenSize.width,
            height: screenSize.height
          })
          .crop(windowRect)
          .toPNG();

Finally, when taking a screenshot, we have to hide the window and then show it again. This ensures that the window isn't part of the resulting image.

Your web renderer already has access to the active application window, so you can simply call the win.hide() or win.show() methods to control its visibility.

Please refer to the full implementation details that are provided in the following code:

const onSnipClick = async () => {
    const { desktopCapturer, screen, shell, remote } = window.require(
      'electron'
    );
    const path = window.require('path');
    const os = window.require('os');
    const fs = window.require('fs');
    const win = remote.getCurrentWindow();
    const windowRect = win.getBounds();

    win.hide();

    try {
      const screenSize = screen.getPrimaryDisplay().workAreaSize;
      const maxDimension = Math.max(screenSize.width, screenSize.height);

      const sources = await desktopCapturer.getSources({
        types: ['screen'],
        thumbnailSize: {
          width: maxDimension * window.devicePixelRatio,
          height: maxDimension * window.devicePixelRatio
        }
      });

      const entireScreenSource = sources.find(
        source => source.name === 'Entire Screen' || source.name === 
           'Screen 1'
      );

      if (entireScreenSource) {
        const outputPath = path.join(os.tmpdir(), 'screenshot.png');

        const image = entireScreenSource.thumbnail
          .resize({
            width: screenSize.width,
            height: screenSize.height
          })
          .crop(windowRect)
          .toPNG();

        fs.writeFile(outputPath, image, err => {
          win.show();

          if (err) return console.error(err);
          shell.openExternal(`file://${outputPath}`);
        });
      } else {
        window.alert('Screen source not found.');
      }
    } catch (err) {
      console.error(err);
    }
  };

Note that we call win.hide() to hide the window before taking a screenshot and then enable visibility by calling win.show() when writing the resized and cropped result to the disk.

We have made very good progress. Now, it's time to test the application to see if everything we've built so far works as expected.