javascripthtmlscreen-capturewebpage-screenshot

Capturing application screen with JavaScript


Is it possible to capture the entire window as screenshot using JavaScript? The application might contain many iframes and div's where content are loaded asynchronously.

I have explored canvas2image but it works on an html element, using the same discards any iframe present on the page.

I am looking for a solution where the capture will take care of all the iframes present.


Solution

  • Yes, widh Puppeteer it is possible.

    1 - Just install the dependency:

    npm i puppeteer-core
    

    2 - Create JavaScript file, screenshot.js

    const puppeteer = require('puppeteer');
    
    (async () => {
    
       const browser = await puppeteer.launch();
       const page = await browser.newPage();
       await page.goto('https://yourweb.com');
       await page.screenshot({path: 'screenshot.png'});
    
       await browser.close();
    })();
    

    3 - Run:

    node screenshot.js
    

    Source