Web Page ScreenShot



This article shows several was how you can create an image from a html page.

To be able to do that, you need an application or library that is capable to render HTML.

Rendering Location

Client-side rendering


The browser renders all page and has then native capability to take a screenshot

With chrome via the devtool Element, you can do a right click on a node and select Capture node screenshot

Chrome Node Screenshot


With Javascript on a page, you can create image from html with canvas. The html2canvas does that and implements only a subset of CSS

Server Side rendering with WebDriver

WebDriver ( ie selenium)


Java example from webdriver documentation with the (takescreenshot function)

  • Java
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.chrome.ChromeDriver;
import java.io.*;
import org.openqa.selenium.*;

public class SeleniumTakeScreenshot {
    public static void main(String args[]) throws IOException {
        WebDriver driver = new ChromeDriver();
        File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
        FileUtils.copyFile(scrFile, new File("./image.png"));
$screenshotPath = sys_get_temp_dir() . '/' . uniqid('php-webdriver-') . '/selenium-screenshot.png';


With Puppeteer (js chrome driver api):

Discover More
Headless browser - WebDriver / ChromeDriver (automated testing - W3C WebDriver API )

A WebDriver is a application: that control / drive real browsers. via function that are available via the the WebDriver API Each browser is backed by a specific WebDriver implementation, called...

Share this page:
Follow us:
Task Runner