How to convert HTML pages of different heights into images in full using Java and Selenium?

Java and Selenium: Completely intercept HTML pages of any height

This article details how to use Java and Selenium libraries to overcome height limitations, completely intercept HTML pages and convert them into images. Traditional methods are prone to missing content when dealing with high pages. This article provides a solution for segmented screenshots and splicing. We will demonstrate using JDK 8 and Selenium-Java (3.141.59).

Challenge: The puzzle of high page screenshots

For shorter pages, just take a screenshot. But higher pages are not. Simply using window.scrollby(0, x) to scroll and take screenshots often lead to some content loss, for example, the content of some line numbers may not be fully displayed.

Solution: Segmented screenshots, perfect stitching

Our strategy is to split the page into multiple parts, take screenshots separately, and finally splice these pictures into a complete long picture. The key is that the height of each scroll is slightly smaller than the height of the screenshot, ensuring that some pictures overlap and avoiding content loss.

Steps detailed explanation:

1. Environment configuration: Set the ChromeDriver path and configure Chrome options, enable headless mode to improve efficiency, and set the window size.

    String chromepath = "d:\\htmltoimg\\selenium\\chromedriver-win64\\chromedriver.exe";
   System.setProperty("webdriver.chrome.driver", chromepath);
   
   ChromeOptions options = new ChromeOptions();
   options.addArguments("--headless");
   options.addArguments("--window-size=2160,1440");
   
   WebDriver driver = new ChromeDriver(options);

2. Page Loading and Waiting: Loading HTML files and using explicit waits to ensure that the page is fully loaded.

    driver.get("file:///d:/htmltoimg/test.html");
   WebDriverWait wait = new WebDriverWait(driver, 15);
   wait.until(ExpectedConditions.visibilityOfElementLocated(By.tagName("body")));

3. Calculate the number of screenshots: Use JavaScript to get the total height of the page and calculate the number of screenshots required based on the height of each screenshot.

    JavascriptExecutor js = (JavascriptExecutor) driver;
   long pageHeight = (long) js.executeScript("return document.body.scrollHeight;");
   int captureHeight = 5000; // height of each intercept int numberOfScreenshots = (int) Math.ceil((double) pageHeight / captureHeight);

4. Segmented screenshots and scrolling: Looping screenshots, after each screenshot, use JavaScript to scroll the page. The scroll distance is slightly smaller than the screenshot height, ensuring overlap.

    int totalHeight = 0;
   List<file> files = new ArrayList();
   for (int i = 0; i </file>

5. Image stitching: Read all temporary images, calculate the total width, and draw the image into a new BufferedImage object.

    int width = 0;
   for (File file : files) {
       BufferedImage img = ImageIO.read(file);
       width = Math.max(img.getWidth(), width);
   }
   
   BufferedImage combinedImage = new BufferedImage(width, totalHeight, BufferedImage.TYPE_INT_ARGB);
   Graphics2D g = combinedImage.createGraphics();
   
   int nowYIndex = 0;
   for (File file : files) {
       BufferedImage img = ImageIO.read(file);
       g.drawImage(img, 0, nowYIndex, null);
       nowYIndex = img.getHeight();
   }
   
   g.dispose();
   ImageIO.write(combinedImage, "PNG", new File("D:\\htmlToImg\\Selenium\\output\\merge.png"));

Through the above steps, you can completely capture HTML pages of any height and generate a complete picture. Remember to add screenshots and file deletion code, as well as necessary exception handling. This method is efficient and reliable, solving the problem of missing content encountered by traditional methods when taking screenshots of high pages.

The above is the detailed content of How to convert HTML pages of different heights into images in full using Java and Selenium?. For more information, please follow other related articles on the PHP Chinese website!