Python Selenium无头模式下iframe截图裁剪问题求助

问题分析 #

从你提供的截图来看：

• full_screen_headless_on.png：无头模式下浏览器默认窗口尺寸过小，导致页面内容被压缩，仅显示部分区域
• iframe_screen_headless_on.png：基于小窗口获取的iframe坐标裁剪后，仅能得到被压缩的部分内容，无法完整截取iframe内的广告创意

核心问题出在三点：

1. 无头模式默认窗口尺寸（如Chrome默认800x600）远小于iframe实际尺寸，导致页面布局被压缩
2. 未等待iframe内部内容完全渲染就获取元素位置，得到的是未完全加载的尺寸
3. 忽略了设备像素比（DPR）的差异，CSS像素和截图实际像素不匹配，导致坐标偏移

解决方案 #

关键调整点 #

• 使用新版无头模式，对齐正常浏览器的渲染行为
• 显式设置窗口尺寸匹配iframe实际大小，避免内容压缩
• 等待iframe内部内容加载完成后再获取尺寸和截图
• 强制设备像素比为1，确保CSS像素与截图像素1:1对应

修改后的可运行代码 #

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options

from PIL import Image
from io import BytesIO

test_url = "https://cdn-creatives.adikteev.com/Creatives/demoLink/MLEngine/index.html?MRAID_320X480_AWEM_CradleEmpires_Aug20/creative-e03f09e5.min.js"
id_iframe = "mainIframe"

# 配置Chrome无头模式选项
options = Options()
options.add_argument("--headless=new")  # 新版无头模式，行为更接近正常浏览器
options.add_argument("--disable-gpu")
# 显式设置窗口尺寸为iframe实际大小（这里目标iframe为320x480，可按需调整）
options.add_argument("--window-size=320,480")
# 强制设备像素比为1，避免坐标偏移
options.add_argument("--force-device-scale-factor=1")

driver = webdriver.Chrome(options=options)

try:
    driver.get(test_url)
    
    # 等待iframe可用并切换进去，确保内部内容开始加载
    WebDriverWait(driver, 20).until(
        EC.frame_to_be_available_and_switch_to_it((By.ID, id_iframe))
    )
    
    # 等待iframe内部内容完全渲染（可根据实际广告内容调整等待条件）
    WebDriverWait(driver, 20).until(
        EC.visibility_of_element_located((By.TAG_NAME, "body"))
    )
    
    # 切回主页面，获取iframe的真实位置和尺寸
    driver.switch_to.default_content()
    iframe_elem = driver.find_element(By.ID, id_iframe)
    
    # 计算iframe的裁剪坐标（CSS像素与截图像素已1:1对应）
    location = iframe_elem.location
    size = iframe_elem.size
    left = location['x']
    top = location['y']
    right = location['x'] + size['width']
    bottom = location['y'] + size['height']
    
    # 截取完整页面并裁剪
    img_png = driver.get_screenshot_as_png()
    driver.save_screenshot("full_screen_headless_fixed.png")
    
    img_crop = Image.open(BytesIO(img_png))
    img_crop = img_crop.crop((left, top, right, bottom))
    img_crop.save("iframe_screen_headless_fixed.png")
    
finally:
    driver.quit()

批量处理建议 #

如果需要批量处理多个iframe截图，可以：

1. 将上述代码封装为函数，接收test_url、iframe_id、output_path作为参数
2. 针对不同尺寸的iframe，可先获取iframe的真实宽高再动态设置--window-size
3. 增加异常捕获逻辑，避免单个任务失败导致批量流程中断

内容的提问来源于stack exchange，提问作者Yannick