如何下载JavaScript渲染页面中的data:image格式图片？

你的需求是等页面中3张通过JS加载的data:image/jpg格式图片全部就绪后下载，现有代码只等待了元素出现，没确保图片加载完成。下面是可行的解决方案：

核心思路 #

• 等待所有目标图片元素的src属性加载为有效的Data URI（即包含data:image/jpg）
• 提取每个图片的Data URI内容，解码后保存为本地JPG文件

修改后的完整代码 #

from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.chrome.service import Service
from selenium.common.exceptions import NoSuchElementException, StaleElementReferenceException
from selenium.webdriver.support import expected_conditions as EC
import warnings
import base64
import os

warnings.filterwarnings("ignore", category=DeprecationWarning)

# 配置Chrome选项
options = Options()
options.add_argument('--headless')
options.add_argument('--no-sandbox')
options.add_argument('--disable-dev-shm-usage')
service = Service(executable_path=r'/usr/bin/chromedriver')
driver = webdriver.Chrome(service=service, options=options)

# 设置等待忽略的异常和超时时间
ignored_exceptions = (NoSuchElementException, StaleElementReferenceException)
wait = WebDriverWait(driver, 20, ignored_exceptions=ignored_exceptions)

image_url = """https://nrex.quickbase.com/db/bpumk9kh3?a=dbpage&pageID=80&rid=169453"""
driver.get(image_url)

# 等待所有图片元素加载完成，且src为有效的data:image/jpg格式
wait.until(lambda d: all(
    img.get_attribute('src').startswith('data:image/jpg')
    for img in d.find_elements(By.XPATH, "//div[@id='imageData']//img")
))

# 获取所有图片元素
image_elements = driver.find_elements(By.XPATH, "//div[@id='imageData']//img")

# 创建保存图片的文件夹
save_dir = 'downloaded_images'
os.makedirs(save_dir, exist_ok=True)

# 遍历图片并保存
for idx, img in enumerate(image_elements, 1):
    data_uri = img.get_attribute('src')
    # 分离Data URI的头部和base64内容
    header, encoded = data_uri.split(',', 1)
    # 解码base64内容为二进制图片数据
    image_data = base64.b64decode(encoded)
    # 保存为JPG文件
    file_path = os.path.join(save_dir, f'image_{idx}.jpg')
    with open(file_path, 'wb') as f:
        f.write(image_data)
    print(f"已保存图片: {file_path}")

driver.quit()

关键部分说明 #

1. 等待图片加载完成：用lambda表达式作为自定义等待条件，检查所有目标图片的src是否以data:image/jpg开头，确保JavaScript已经生成完整的图片数据。
2. 解析Data URI：将Data URI按逗号分割，取出base64编码部分，通过base64.b64decode解码成可直接保存的二进制图片数据。
3. 批量保存处理：自动创建保存文件夹，循环遍历图片元素逐一保存，避免文件覆盖。

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