How to Take a Screenshot With JavaScript?

// import the required library
const puppeteer = require("puppeteer");

(async () =>{

    // start browser instance in headless mode and launch a new page
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    // visit the product page
    await page.goto("https://scrapingcourse.com/ecommerce/");

    // use setTimeout to wait for elements to load
    await new Promise(resolve => setTimeout(resolve, 10000));

    // take a screenshot of the full page
    await page.screenshot({ path: "pupppeteer-screenshot.png", fullPage:true})

    // close the browser
    await browser.close();
})();

// import the required modules
const axios = require("axios");
const fs = require("fs");

axios({
    url: "https://api.zenrows.com/v1/",
    method: "GET",

    // specify your request parameters
    params: {
        "url": "https://scrapingcourse.com/ecommerce/",
        "apikey": "<YOUR_ZENROWS_API_KEY>",
        "js_render": "true",
        "premium_proxy": "true",
        "return_screenshot": "true"
    },

    // set response type to stream
    responseType: "stream"
})
.then(function (response) {
    // write the image file to your project directory
    const writer = fs.createWriteStream("screenshot-from-zenrows.png");

    response.data.pipe(writer);
    writer.on("finish", () => {
        console.log("Image saved successfully.");
    });
})
.catch(function (error) {
    console.error("Error occurred:", error);
});

// import the required library
const { chromium } = require("playwright");

(async () => {

    // start a browser instance
    const browser = await chromium.launch();
    const page = await browser.newPage();
    
    // navigate to the desired URL
    await page.goto("https://scrapingcourse.com/ecommerce/");
    
    // take a screenshot of the full page
    await page.screenshot({ path: "playwright-screenshot.png", fullPage: true });
    
    // close the browser
    await browser.close();
})();

// import the required library
const { Builder, By } = require("selenium-webdriver");
const chrome = require("selenium-webdriver/chrome");

// define an async function to encapsulate our Selenium code
async function scraper() {

    // create a new WebDriver instance using Chrome in headless mode
    const driver = new Builder()
        .forBrowser("chrome")
        .setChromeOptions(new chrome.Options().addArguments("--headless"))
        .build();

    try {
        // open the target website
        await driver.get("https://scrapingcourse.com/ecommerce/");

        // define a function to get scroll dimensions
        async function getScrollDimension(axis) {
            return await driver.executeScript(`return document.body.parentNode.scroll${axis}`);
        }

        // get the page scroll dimensions
        const width = await getScrollDimension("Width");
        const height = await getScrollDimension("Height");

        // set the browser window size
        await driver.manage().window().setRect({ width, height });

        // take a full-page screenshot
        const fullBodyElement = await driver.findElement(By.css("body"));
        await fullBodyElement.takeScreenshot().then(function (data) {
            require("fs").writeFileSync("selenium-full-page-screenshot.png", data, "base64");
        });

    } finally {
        // quit the browser
        await driver.quit();
    }
}

// call the scraper function to take screenshot
scraper();

function takeshot() {
  
    // get the body tag to screenshot the body content
    let div = document.getElementsByTagName("body")[0];
  
    // use html2canvas to take a screenshot and append to an output div
    html2canvas(div).then(
      function (canvas) {
        document.getElementById("screenshot").appendChild(canvas);
      }
    )
}

// import the required libraries
const { app, BrowserWindow } = require("electron");
const fs = require("fs");

function createWindow() {

    // create a new desktop window
    const win = new BrowserWindow({
        width: 800,
        height: 1500
    });

    // load the target page into the desktop application
    win.loadURL("https://scrapingcourse.com/ecommerce/");

    // create a web content context
    const contents = win.webContents;

    // wait for the page to finish loading and take a screenshot
    contents.on("did-finish-load", async () => {
    
        // capture the target page's screenshot
        const image = await contents.capturePage();
        
        // specify the custom file path
        const filePath = "pictures/screenshot.png";
        
        // write the screenshot into the file path
        fs.writeFile(filePath, image.toPNG(), (err) => {

            if (err) {
                console.error("Error saving screenshot:", err);
            } else {
                console.log("Screenshot saved to:", filePath);
            }
        });
    });
}

// create a window only when the app is ready
app.whenReady().then(createWindow);

// quite the app after closing the running window
app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit();
    }
});

// activate the app when triggered by a user
app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});