Python Selenium如何将两个相邻网页元素的截图合并为单张图片

方案1：截取包含两个元素的最小外接矩形（推荐，无拼接误差） #

核心逻辑：两个相邻元素在页面上有固定的位置边界，计算能同时覆盖两者的最小矩形区域，直接从页面全量截图中裁剪出该区域，不需要二次拼接，能100%保留两个元素的原始相邻排版、间距和样式。
实现步骤：

• 分别获取两个目标元素的相对页面坐标、尺寸参数

# 替换为你自己的两个元素定位结果
ele1 = driver.find_element(...)
ele2 = driver.find_element(...)

# 读取元素的页面坐标和渲染尺寸
x1, y1 = ele1.location['x'], ele1.location['y']
w1, h1 = ele1.size['width'], ele1.size['height']

x2, y2 = ele2.location['x'], ele2.location['y']
w2, h2 = ele2.size['width'], ele2.size['height']

• 计算覆盖两个元素的最小外接矩形边界

# 取两个元素的最左、最上边界作为矩形起点
min_x = min(x1, x2)
min_y = min(y1, y2)
# 取两个元素的最右、最下边界作为矩形终点
max_x = max(x1 + w1, x2 + w2)
max_y = max(y1 + h1, y2 + h2)

• 从全页截图中裁剪目标区域直接保存

from PIL import Image
import io

# 截取当前页面的全量渲染图（兼容元素不在当前视口的场景）
full_page_img = Image.open(io.BytesIO(driver.get_screenshot_as_png()))
# 按计算好的边界裁剪
combined_img = full_page_img.crop((min_x, min_y, max_x, max_y))
combined_img.save("combined_result.png")

方案优势：代码逻辑简单，不存在拼接错位、样式失真的问题，是处理相邻元素合并截图的最优解。

方案2：分别截取两个元素独立图片，手动拼接（灵活度高） #

适合需要调整两个元素的相对间距、或者跨区域组合元素的场景，按两个元素的实际排列方向（水平/垂直）生成新画布，把两个单元素截图粘贴到对应位置即可。
实现步骤：

• 直接获取两个元素的截图二进制流，不需要先存本地文件

img1 = Image.open(io.BytesIO(ele1.screenshot_as_png))
img2 = Image.open(io.BytesIO(ele2.screenshot_as_png))

• 根据元素的排列方向新建画布拼接
  1. 水平相邻（左右排布）：新画布高度取两个元素的最大高度，宽度为两个元素宽度之和（如果要保留原始相邻间距，需在宽度计算中加上两个元素之间的实际间隙值）

  # 水平拼接示例
  gap = 0  # 两个元素的原始相邻间距，单位像素
  new_w = img1.width + gap + img2.width
  new_h = max(img1.height, img2.height)
  new_canvas = Image.new('RGB', (new_w, new_h))
  # 粘贴两个元素的截图，默认按顶部对齐
  new_canvas.paste(img1, (0, 0))
  new_canvas.paste(img2, (img1.width + gap, 0))
  new_canvas.save("combined_result.png")
  

  2. 垂直相邻（上下排布）：新画布宽度取两个元素的最大宽度，高度为两个元素高度之和，粘贴时第二个元素的Y偏移为第一个元素的高度加上原始间距即可。

常见踩坑提示 #

• 浏览器缩放比例会导致Selenium获取的坐标、尺寸和实际渲染像素存在偏差，操作前需确保浏览器缩放为100%。
• 如果元素位于Shadow DOM内部，需先穿透Shadow DOM获取真实元素对象，否则读取到的位置参数为无效值。
• 全页截图模式如果遇到懒加载元素，需先滚动页面触发所有内容渲染完成再截图，避免合并图出现空白块。

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