Python利用Selenium实现全网页截图_Python

无论是归档网站、测试页面设计，还是为报告记录网页内容，一个可靠的截图工具都能大大提升效率。本文将介绍如何使用python、selenium和wxpython构建一个用户友好的网页截图工具。该工具能在浏览器中显示网页，自动平滑滚动到底部以触发懒加载内容，并将整个网页截图保存为png文件。

为什么需要一个网页截图工具

现代网页通常是动态的，会随着用户滚动加载内容（即懒加载）。传统的截图方法只能捕获可见区域，可能会遗漏动态加载的内容。我们的工具解决了以下问题：

显示网页：通过可见的浏览器窗口，让用户可以看到网页加载和滚动的过程。
平滑滚动：自动以平滑动画滚动到底部，确保所有懒加载内容都加载完成。
完整截图：捕获整个网页，包括超出视口的部分。
用户友好界面：提供图形界面，方便输入url、选择保存路径，并显示进度反馈。

使用技术

python：核心编程语言，用于编写工具逻辑。

selenium：浏览器自动化框架，用于控制chrome浏览器并捕获截图。

wxpython：用于创建跨平台的图形用户界面（gui）。

chromedriver：chrome的webdriver，通过webdriver_manager自动管理。

工作原理

该工具基于wxpython构建，提供简单的图形界面。用户输入网页url，选择保存路径，点击按钮即可开始截图。以下是工作流程：

1. 用户界面

工具使用wxpython创建了一个简洁的gui，包含以下组件：

url输入框：用户输入目标网页的url（若无http://或https://前缀，自动添加https://）。
保存路径选择：允许用户选择截图保存的文件夹，默认路径为用户的“图片”文件夹。
截图按钮：触发网页加载和截图过程。
进度条：实时显示滚动和截图进度。
状态栏：显示当前操作状态（如“正在加载网页”或“截图已保存”）。

2. 网页加载与滚动

非无头模式：工具使用selenium控制chrome浏览器，并以可见窗口运行（移除--headless选项），让用户看到网页的加载和滚动过程。

平滑滚动：通过javascript的window.scrollto方法实现平滑滚动（behavior: 'smooth'），每次滚动一小段（基于页面高度和视口高度计算步数），并暂停0.5秒以确保内容加载。

进度反馈：滚动过程中，进度条根据滚动步数更新，增强用户体验。

3. 截图捕获

cdp方法：使用chrome devtools protocol（cdp）的page.capturescreenshot方法，一次性捕获整个网页（capturebeyondviewport: true），无需拼接。

保存为png：截图以png格式保存，文件名为{域名}_{时间戳}.png，例如example.com_20250516_194023.png。

4. 错误处理

验证url和保存路径的有效性，若无效则弹出提示。

捕获所有异常，确保浏览器在错误发生时正确关闭，并通过弹窗和状态栏向用户反馈详细错误信息。

代码实现

以下是核心代码片段，展示了滚动和截图逻辑：

import wx
import os
import time
from selenium import webdriver
from selenium.webdriver.chrome.options import options
from selenium.webdriver.chrome.service import service
from webdriver_manager.chrome import chromedrivermanager
import base64
from urllib.parse import urlparse
import threading
 
class screenshotapp(wx.frame):
    def __init__(self, parent, title):
        super(screenshotapp, self).__init__(parent, title=title, size=(600, 300))
        self.initui()
        self.centre()
        self.show()
 
    def initui(self):
        panel = wx.panel(self)
        vbox = wx.boxsizer(wx.vertical)
 
        # url输入区域
        url_box = wx.boxsizer(wx.horizontal)
        url_label = wx.statictext(panel, label="网页url:")
        self.url_text = wx.textctrl(panel, size=(400, -1))
        url_box.add(url_label, flag=wx.right | wx.align_center_vertical, border=8)
        url_box.add(self.url_text, proportion=1)
 
        # 保存路径区域
        path_box = wx.boxsizer(wx.horizontal)
        path_label = wx.statictext(panel, label="保存路径:")
        self.path_text = wx.textctrl(panel, size=(300, -1))
        browse_button = wx.button(panel, label="浏览...")
        path_box.add(path_label, flag=wx.right | wx.align_center_vertical, border=8)
        path_box.add(self.path_text, proportion=1, flag=wx.right, border=5)
        path_box.add(browse_button)
 
        # 截图按钮
        screenshot_button = wx.button(panel, label="截取网页")
 
        # 进度条
        self.progress_bar = wx.gauge(panel, range=100, size=(400, 20))
        self.progress_bar.setvalue(0)
 
        # 状态显示区域
        self.status_text = wx.statictext(panel, label="")
 
        # 添加到垂直布局
        vbox.add((-1, 20))
        vbox.add(url_box, flag=wx.expand | wx.left | wx.right, border=10)
        vbox.add((-1, 20))
        vbox.add(path_box, flag=wx.expand | wx.left | wx.right, border=10)
        vbox.add((-1, 30))
        vbox.add(screenshot_button, flag=wx.align_center)
        vbox.add((-1, 20))
        vbox.add(self.progress_bar, flag=wx.expand | wx.left | wx.right, border=10)
        vbox.add((-1, 10))
        vbox.add(self.status_text, flag=wx.align_center)
 
        # 绑定事件
        browse_button.bind(wx.evt_button, self.onbrowse)
        screenshot_button.bind(wx.evt_button, self.onscreenshot)
 
        # 设置默认保存路径为用户的图片文件夹
        default_path = os.path.join(os.path.expanduser("~"), "pictures")
        self.path_text.setvalue(default_path)
 
        panel.setsizer(vbox)
 
    def onbrowse(self, event):
        dialog = wx.dirdialog(self, "选择保存截图的文件夹", style=wx.dd_default_style)
        if dialog.showmodal() == wx.id_ok:
            self.path_text.setvalue(dialog.getpath())
        dialog.destroy()
 
    def onscreenshot(self, event):
        url = self.url_text.getvalue().strip()
        save_path = self.path_text.getvalue().strip()
 
        # 验证url
        if not url:
            wx.messagebox("请输入有效的url", "错误", wx.ok | wx.icon_error)
            return
 
        # 如果url没有http前缀，添加https://
        if not url.startswith(('http://', 'https://')):
            url = 'https://' + url
            self.url_text.setvalue(url)
 
        # 验证保存路径
        if not os.path.exists(save_path):
            try:
                os.makedirs(save_path)
            except exception as e:
                wx.messagebox(f"创建保存路径失败: {str(e)}", "错误", wx.ok | wx.icon_error)
                return
 
        self.status_text.setlabel("正在加载网页并滚动，请稍候...")
        self.progress_bar.setvalue(0)
        self.layout()
 
        # 使用线程避免界面冻结
        thread = threading.thread(target=self.take_screenshot, args=(url, save_path))
        thread.daemon = true
        thread.start()
 
    def scroll_page(self, driver):
        """滚动页面以触发所有懒加载内容，显示滚动效果"""
        total_height = driver.execute_script("return document.body.scrollheight")
        viewport_height = driver.execute_script("return window.innerheight")
        steps = max(1, total_height // viewport_height)  # 计算滚动步数
        step_height = total_height / steps
 
        for i in range(steps + 1):
            scroll_position = int(i * step_height)
            driver.execute_script(f"window.scrollto({{top: {scroll_position}, behavior: 'smooth'}});")
            wx.callafter(self.progress_bar.setvalue, int((i + 1) / (steps + 1) * 100))
            time.sleep(0.5)  # 等待平滑滚动和内容加载
        time.sleep(1)  # 确保所有内容加载完成
 
    def take_screenshot(self, url, save_path):
        try:
            # 设置chrome选项，移除无头模式以显示浏览器
            chrome_options = options()
            chrome_options.add_argument("--disable-gpu")
            chrome_options.add_argument("--disable-infobars")
            chrome_options.add_argument("--disable-extensions")
            chrome_options.add_argument("--window-size=1920,1080")  # 设置初始窗口大小
 
            # 启动浏览器
            service = service(chromedrivermanager().install())
            driver = webdriver.chrome(service=service, options=chrome_options)
 
            # 访问网页
            driver.get(url)
            time.sleep(3)  # 等待页面初始加载
 
            # 滚动页面以触发懒加载内容
            self.scroll_page(driver)
 
            # 获取域名和时间戳
            domain = urlparse(url).netloc or "webpage"
            timestamp = time.strftime("%y%m%d_%h%m%s")
 
            # 使用cdp方法获取完整页面截图
            result = driver.execute_cdp_cmd('page.capturescreenshot', 
                                            {'format': 'png', 'capturebeyondviewport': true})
            image_data = base64.b64decode(result['data'])
            save_file = os.path.join(save_path, f"{domain}_{timestamp}.png")
            with open(save_file, 'wb') as f:
                f.write(image_data)
 
            driver.quit()
            wx.callafter(self.screenshot_complete, save_file)
 
        except exception as e:
            if 'driver' in locals():
                driver.quit()
            wx.callafter(self.screenshot_error, str(e))
 
    def screenshot_complete(self, filepath):
        self.status_text.setlabel(f"截图已保存至: {filepath}")
        self.progress_bar.setvalue(100)
        wx.messagebox(f"截图已保存至:\n{filepath}", "成功", wx.ok | wx.icon_information)
 
    def screenshot_error(self, error_msg):
        self.status_text.setlabel(f"截图失败: {error_msg}")
        self.progress_bar.setvalue(0)
        wx.messagebox(f"截图失败: {error_msg}", "错误", wx.ok | wx.icon_error)
 
if __name__ == '__main__':
    app = wx.app()
    screenshotapp(none, title='网页截图工具')
    app.mainloop()