本文旨在提供一种使用 Selenium 和 Python 下载由 JavaScript 动态渲染的网页图片的方法。 针对图片URL为标准URL或Base64编码的情况，分别提供解决方案。通过结合 Selenium 的页面加载能力和 requests 库或 base64 库的数据处理能力，可以有效地从网页中提取并保存图片资源。本文提供详细的代码示例和解释，帮助开发者轻松实现图片下载功能。
很多网页使用 JavaScript 动态加载图片，这使得直接通过 requests 库获取图片变得困难。Selenium 可以模拟浏览器行为，等待 JavaScript 执行完毕，从而获取完整的页面内容，包括动态加载的图片。
以下是一个使用 Selenium 和 Python 下载网页中 JavaScript 渲染的图片的详细教程。
前提条件
立即学习“Java免费学习笔记（深入）”；
安装 Python： 确保你已经安装了 Python 3.6 或更高版本。
-
安装 Selenium： 使用 pip 安装 Selenium 库：
pip install selenium
-
安装 requests： 用于下载标准 URL 的图片：
pip install requests
安装 Chrome WebDriver： 下载与你的 Chrome 浏览器版本匹配的 ChromeDriver，并将其添加到系统 PATH 环境变量中。你也可以指定 ChromeDriver 的路径。
代码示例
以下代码演示了如何使用 Selenium 下载网页中的图片，包括处理标准 URL 和 Base64 编码的图片：
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
from selenium.common.exceptions import StaleElementReferenceException
from selenium.webdriver.support import expected_conditions as EC
import warnings
import base64
import requests
warnings.filterwarnings("ignore", category=DeprecationWarning)
options = Options()
options.add_argument('--no-sandbox')
options.add_argument('--disable-dev-shm-usage')
# chromedriver.exe 路径根据你的实际情况修改
service = Service(executable_path='./chromedriver.exe')
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(str(image_url))
wait.until(EC.presence_of_element_located((By.XPATH, "//div[@id='imageData']//a")))
driver.implicitly_wait(20)
data = driver.page_source
images = driver.find_elements(By.XPATH, "//img")
for i, image in enumerate(images):
src = image.get_attribute('src')
if src and src.startswith('http'):
response = requests.get(src)
if response.status_code == 200:
with open(f'image_{i}.jpg', 'wb') as file:
file.write(response.content)
elif src and src.startswith('data:image'):
base64_encoded_data = src.split(',')[1]
with open(f'image_{i}.jpg', 'wb') as file:
file.write(base64.b64decode(base64_encoded_data))
driver.quit()代码解释
-
导入必要的库：
- selenium.webdriver: 用于控制浏览器。
- selenium.webdriver.chrome.options: 用于配置 Chrome 浏览器的选项。
- selenium.webdriver.common.by: 用于指定查找元素的方式（例如，通过 XPath）。
- selenium.webdriver.support.ui: 用于等待页面元素加载完成。
- selenium.webdriver.chrome.service: 用于设置 ChromeDriver 的路径。
- selenium.common.exceptions: 用于处理 Selenium 抛出的异常。
- selenium.webdriver.support: 用于设置期望条件。
- base64: 用于解码 Base64 编码的图片数据。
- requests: 用于下载标准 URL 的图片。
-
配置 Chrome 选项：
options = Options() options.add_argument('--no-sandbox') options.add_argument('--disable-dev-shm-usage')- --headless: 以无头模式运行 Chrome，即不显示浏览器界面。如果需要查看浏览器操作过程，可以移除此选项。
- --no-sandbox: 在 Docker 等容器环境中使用时，需要添加此选项。
- --disable-dev-shm-usage: 避免在某些环境中出现内存问题。
-
初始化 WebDriver：
service = Service(executable_path='./chromedriver.exe') driver = webdriver.Chrome(service=service, options=options)
- 将 chromedriver.exe 的路径设置为你的 ChromeDriver 实际路径。
-
打开网页：
image_url = """https://nrex.quickbase.com/db/bpumk9kh3?a=dbpage&pageID=80&rid=169453""" driver.get(str(image_url))
- 使用 driver.get() 方法打开目标网页。
-
等待元素加载：
wait.until(EC.presence_of_element_located((By.XPATH, "//div[@id='imageData']//a"))) driver.implicitly_wait(20)
- 使用 WebDriverWait 和 expected_conditions 等待指定的元素加载完成。
- EC.presence_of_element_located: 期望元素出现在 DOM 树中，但不一定可见。
- driver.implicitly_wait(20): 设置隐式等待时间，单位为秒。
-
查找图片元素：
images = driver.find_elements(By.XPATH, "//img")
- 使用 driver.find_elements() 方法查找所有的 <img> 标签。
- By.XPATH: 指定使用 XPath 表达式查找元素。
-
遍历图片元素并下载：
for i, image in enumerate(images): src = image.get_attribute('src') if src and src.startswith('http'): response = requests.get(src) if response.status_code == 200: with open(f'image_{i}.jpg', 'wb') as file: file.write(response.content) elif src and src.startswith('data:image'): base64_encoded_data = src.split(',')[1] with open(f'image_{i}.jpg', 'wb') as file: file.write(base64.b64decode(base64_encoded_data))- 遍历所有找到的图片元素。
- 获取 src 属性，判断图片的来源。
- 如果 src 以 http 开头，则使用 requests 库下载图片。
- 如果 src 以 data:image 开头，则认为是 Base64 编码的图片，解码并保存。
- 使用 with open() 语句以二进制写入模式打开文件，并将图片数据写入文件。
-
关闭浏览器：
driver.quit()
- 使用 driver.quit() 方法关闭浏览器。
注意事项
- WebDriver 路径： 确保 ChromeDriver 的路径正确配置，否则 Selenium 无法启动 Chrome 浏览器。
- 等待时间： 根据网页加载速度调整等待时间，确保所有图片都加载完成后再进行下载。
- 异常处理： 添加适当的异常处理机制，例如处理网络连接错误、文件写入错误等。
- 反爬虫机制： 某些网站可能采取反爬虫措施，例如验证码、IP 限制等。需要根据实际情况采取相应的反爬虫策略。
- 图片格式： 上述代码默认将所有图片保存为 JPG 格式。如果需要保存为其他格式，需要根据图片的实际格式进行调整。
总结
本文提供了一个使用 Selenium 和 Python 下载 JavaScript 渲染的图片的完整解决方案。通过结合 Selenium 的页面加载能力和 requests 库或 base64 库的数据处理能力，可以有效地从网页中提取并保存图片资源。在实际应用中，需要根据具体情况进行调整和优化，例如处理异常、应对反爬虫机制等。
