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.
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
With Javascript on a page, you can create image from html with canvas. The html2canvas does that and implements only a subset of CSS
Java example from webdriver documentation with the (takescreenshot function)
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();
driver.get("http://www.example.com");
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File("./image.png"));
driver.quit();
}
}
$screenshotPath = sys_get_temp_dir() . '/' . uniqid('php-webdriver-') . '/selenium-screenshot.png';
$this->driver->get($this->getTestPageUrl('index.html'));
$this->driver->takeScreenshot($screenshotPath);
With Puppeteer (js chrome driver api):