I was try BrowserWindow.capturePage but this function take screenshot of only visible page. I try to google, but didn't find how to take screenshot of full webpage in Electron app?

I was try BrowserWindow.capturePage but this function take screenshot of only visible page. I try to google, but didn't find how to take screenshot of full webpage in Electron app?

• javascript
• electron

Share Follow asked Oct 11, 2016 at 14:03 PavelPavel 19933 silver badges1111 bronze badges 4

• Are you using the Screenshot Service? – BenM Commented Oct 11, 2016 at 14:09
• Are you trying to take a screenshot of the electron app ? or the entire screen ? – Carlos Delgado Commented Oct 11, 2016 at 15:32
• I need to capture entire web page loaded in BrowserWindow element. Not only visible area of page. – Pavel Commented Oct 12, 2016 at 12:39
• @Pavel this article may be useful: ourcodeworld./articles/read/280/… – Carlos Delgado Commented Oct 12, 2016 at 14:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

As I knew from electron doc, webContents.capturePage only return the screenshot of visible area, additional, if the size of web page is larger than the screen, the result will miss the overflowed content

【Solution】

1. find a node module to transfer DOM to Image

suggest html-to-image

2. load it into the target webpage

via preload

  // mainProcess
  const testWin = new BrowserWindow({
    ...
    webPreferences: {
      preload: path.join(__dirname, '../preload.js'),
    },
    ...
  });

  // preload.js
  const htmlToImage = require('html-to-image');

  if (window) {
    window.htmlToImage = htmlToImage;
  }

3. prepare execute JS content

// captureWebPageJS
(() => {
  return new Promise((resolve, reject) => {
    try {
      if (window.htmlToImage) {
        const htmlToImage = window.htmlToImage;
        const $body = document.querySelectorAll('body')[0];

        htmlToImage.toJpeg($body).then(resolve).catch(reject);
      } else {
        reject(new Error('no htmlToImage module found!'));
      }
    } catch (err) {
      reject(err);
    }
  });
})();

4. convert DOM to image and auto-open

const previewImgUrl = path.join(__dirname, 'preview-capture-image.jpg');
const imgUrlViaBase64 = await testWin.webContents.executeJavaScript(captureWebPageJS, true);

fs.writeFileSync(previewImgUrl, String(imgUrlViaBase64).replace(/^data:image\/\w+;base64,/, ''), {
  encoding: 'base64',
});
// { shell } = require('electron');
shell.openPath(previewImgUrl);

OK, everything has been done!

I used this library screenshot-desktop which works very well, when you call the lib method returned by the bufer array, you can save the file to a temporary directory and get an absolute link to the screenshot. here's one thing - when you call the screenshot method, it takes the screenshot itself to the clipboard