Python/Java 对网页进行截图生成长图（存在滚动条情况）

插件

Python

• playwright（本次使用这个）
• selenium

Java

• selenium-java

原理

主要就是模拟人工通过浏览器访问相关网址

Java版代码

注意JDK和插件依赖版本以及驱动版本一定要匹配 否则可能启动失败

• JDK1.8
• 依赖3.5.3
• 驱动版本128.0.6613.86 下载地址

<dependency>
  <groupId>org.seleniumhq.selenium</groupId>
  <artifactId>selenium-java</artifactId>
  <version>3.5.3</version>
</dependency>

@GetMapping
  public void screenshot() throws InterruptedException, IOException {
    System.setProperty("webdriver.chrome.driver", "d:/data/chorm/chromedriver.exe");
    ChromeOptions options = new ChromeOptions();
    options.addArguments("--headless");
    options.addArguments("--remote-allow-origins=*");
    WebDriver driver = new ChromeDriver(options);
    // 打开网站URL 替换成真正的访问网址
    driver.get("https://www.OKXXX.com.cn");
    JavascriptExecutor js = (JavascriptExecutor) driver;
    
    // 存在滚动条的状况 需要将浏览器窗口宽高设置为 需要截取的容器宽高 这样才能截取完整图片
    Long height = (Long) js.executeScript("return document.getElementById('container-view').scrollHeight");
    Long width = (Long) js.executeScript("return document.getElementById('container-view').scrollWidth");
    Dimension dimension = new Dimension(width.intValue(), height.intValue());
    driver.manage().window().setSize(dimension);
    // 设置容器为可见
    js.executeScript("document.getElementById('container-view').style.overflow='visible'");
    System.out.println(driver.manage().window().getSize());
    // 设置延迟等待截取完整图片 可根据实际进行调整
    Thread.sleep(10000);
    String screenshotAs = driver.findElement(By.id("container-view"))
        .getScreenshotAs(OutputType.BASE64);

    File file = new File("d:/data/screenshot-112233.png");
    FileOutputStream fos = new FileOutputStream(file);
    byte[] decode = Base64.getDecoder().decode(screenshotAs);
    fos.write(decode);
    fos.close();
    // 关闭浏览器
    driver.quit();
  }

Python版代码

• playwright

import datetime
from time import sleep

from playwright.sync_api import sync_playwright


def capture_scrollable_page(url, output_path):
    with sync_playwright() as p:
    	# 创建浏览器对象
        browser = p.chromium.launch()
        page = browser.new_page()
        # 打开网页
        page.goto(url)
        # 可以使用page.evaluate执行javascript脚本 这里为了使截图显示全 设置最外面的滚动容器设置为visible
        page.evaluate('''
            document.getElementById('container-view').style.overflow='visible'
        ''')
        sleep(10)
        # 这里选择要进行截图的容器 相当于id选择器 path为图片输出的路径
        page.locator('#container-view').screenshot(path=output_path)

# 使用示例
url = "https://XXX.com.cn"  # 可访问的网页、http://localhost也可以哦
output_path: str = "d:/data/screenshot-{}.png"  # 替换为你想要保存的文件路径
output_path = output_path.format(datetime.datetime.now().strftime("%H%M%S"))
capture_scrollable_page(url, output_path)

• selenium

import time

from selenium import webdriver

def get_image(url, pic_name):
    chrome_options = webdriver.ChromeOptions()
    chrome_options.add_argument('headless')
    chrome_options.add_argument('--no-sandbox')
    chrome_options.add_argument('--disable-dev-shm-usage')
    driver = webdriver.Chrome('D:/data/chorm/chromedriver.exe', options=chrome_options)
    # 控制浏览器写入并转到链接

    driver.get(url)
    time.sleep(40)
    # 接下来是全屏的关键，用js获取页面的宽高，如果有其他需要用js的部分也可以用这个方法
    width = driver.execute_script("return document.documentElement.scrollWidth")
    height = driver.execute_script("return document.documentElement.scrollHeight")
    # 将浏览器的宽高设置成刚刚获取的宽高
    driver.set_window_size(width, height)
    time.sleep(1)

    # 截图并关掉浏览器
    driver.save_screenshot(pic_name)
    driver.close()

get_image('http://localhost:8081/', 'd:/data/screenshot1111111.png')