Electron screenshot is too small

Question

Hi I am using electron to take a screenshot of the entire screen and my code is working good, except the fact that the size of the screenshot being download is too small.

This is the js function that takes the screenshot on button click

renderer.js:

const electron = require('electron');

const desktopCapturer = electron.desktopCapturer;
const electronScreen = electron.screen;
const shell = electron.shell;

const remote = electron.remote;
const dialog = remote.dialog;

const fs = require('fs');
const os = require('os');
const path = require('path');

const screenshot = document.getElementById('screen-shot');
const screenshotMsg = document.getElementById('screenshot-path');
const pathButton = document.getElementById('path-button');

 var screenShotPath ='';

 pathButton.addEventListener('click',function (event) {
     dialog.showSaveDialog(function (fileName) {
         if(fileName == undefined){
             return;
         }
         screenShotPath = fileName;
         screenshotMsg.textContent = screenShotPath;
     });
 });
screenshot.addEventListener('click',function(event){
    screenshotMsg.textContent =  'Gathering screens';
    const thumbSize = determineScreenshot();
    console.log(thumbSize.height);
    console.log(thumbSize.width);
    let options ={types: ['screen'], thumnailSize: thumbSize};

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

        sources.forEach(function (source) {
           if(source.name === "Entire screen" || source.name === "Screen 1" ){
                if(screenShotPath === ''){
                    screenShotPath = path.join(os.tmpdir(),'screenshot.jpeg');
                }
                console.log(screenShotPath);
                fs.writeFile(screenShotPath,source.thumbnail.toPNG(), function (err) {
                    if(err) return console.log(err.message);

                    shell.openExternal("file://"+screenShotPath);
                    var message = 'Saved SS to ' + screenShotPath;
                    screenshotMsg.textContent = message;
                });
           }
        });
    });
});

function  determineScreenshot() {
        const screensize =electronScreen.getPrimaryDisplay().workAreaSize;
        const maxDimension = Math.max(screensize.width,screensize.height);
        console.log(maxDimension);

        return {
            width: maxDimension * window.devicePixelRatio,
            height: maxDimension * window.devicePixelRatio
        };
}

The screenshot is capturing the work area well but the problem is it is too small. Can someone please tell how to increase the size of it? I am attaching the generated screenshot herewith.

Answer 1

This might help you.

document.getElementById('button').addEventListener('click', () => { // The button which takes the screenshot
    desktopCapturer.getSources({ 
        types: ['screen'],
        thumbnailSize: {
            width: 384,
            height: 216
        } 
    }).then( sources => {
        
    }) })