动态加载网页图片抓取：Dermnet案例与Google CSE API利用指南

39次阅读

本教程旨在解决Dermnet等采用JavaScript动态加载图片的网站抓取难题。当传统方法如BeautifulSoup或Selenium受阻时，我们将展示如何通过浏览器开发者工具识别并直接调用隐藏的Google自定义搜索API（CSE）。通过分析API请求参数并解析返回的JSON数据，本指南提供了一种高效、稳定的图片抓取策略，并涵盖了分页处理和实践中的注意事项。

理解动态加载的挑战

在进行网页数据抓取时，我们经常会遇到内容通过javascript动态加载的网站。这类网站在初始html响应中可能不包含所需的图片链接或数据，而是通过客户端脚本在页面加载完成后异步请求数据并渲染。对于这类场景，仅仅使用requests库获取html并结合beautifulsoup解析静态内容往往会失败，因为beautifulsoup无法执行javascript。虽然selenium等自动化测试工具可以模拟浏览器行为，执行javascript并等待内容加载，但其资源消耗较大，且在某些复杂场景下（如本案例中内容来自第三方api）仍然可能难以直接定位到渲染后的元素。

识别隐藏的API调用

解决动态加载问题的关键在于“透过现象看本质”，即找出页面数据实际的来源。许多动态加载的内容并非直接嵌入在JavaScript代码中，而是通过JavaScript向后端API发送请求获取。我们可以利用浏览器的开发者工具来发现这些隐藏的API调用。

打开开发者工具： 在目标网站（例如Dermnet的搜索结果页）上，按下F12键（或右键点击页面选择“检查”/“Inspect”）打开开发者工具。
切换到“网络”（Network）标签页： 这个标签页会显示浏览器在加载页面时发出的所有HTTP请求。
过滤和观察： 刷新页面，并仔细观察网络请求。通常，动态加载的数据请求会以XHR（XMLHttpRequest）或Fetch的形式出现。在本案例中，我们可以观察到有针对cse.google.com的请求。这类请求往往是Google自定义搜索（Google Custom Search Engine, CSE）的API调用。
分析API请求： 找到类似https://cse.google.com/cse/element/v1?rsz=large&num=16&hl=en&source=gcsc&gss=.com&cselibv=…&searchtype=image&cx=…&q=…&safe=off&cse_tok=…&exp=csqr,cc,bf&callback=google.search.cse.api…的URL。这个URL就是获取图片数据的API接口。点击该请求，查看其“响应”（Response）标签页，你会发现返回的是一个JSON对象，其中包含results字段，里面就是我们需要的图片信息。

构建API请求与解析响应

一旦识别出API接口，我们就可以绕过前端渲染，直接向该API发送请求并解析其JSON响应。

1. API URL参数分析

上述API URL包含多个关键参数，理解它们对于构建请求至关重要：

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

25

查看详情

q: 搜索关键词（例如basal%20cell%20carcinoma%20dermoscopy）。
cx: Google CSE的自定义ID，用于标识特定的搜索引擎。
num: 每页返回结果的数量。
start: 控制分页，表示从第几个结果开始返回。
cse_tok: 一个动态生成的令牌（token），可能是用于身份验证或防止滥用。这个参数需要特别注意，它可能会随时间或请求而变化。
cselibv: 可能是一个版本号或动态生成的标识符，也建议从实际的网络请求中获取最新值。
callback: 通常用于JSONP请求，指定回调函数名。在直接请求纯JSON时，通常可以忽略或移除。

2. 使用Python发送API请求

我们可以使用Python的requests库来模拟这些API请求。

import requests import json import re import time import os from urllib.parse import urlparse  def fetch_dermnet_images_via_api(query, max_pages=3, delay_seconds=1):     """     通过Google CSE API抓取Dermnet的图片链接。     注意：cse_tok和cselibv参数可能需要动态获取或定期更新。     """     base_api_url = "https://cse.google.com/cse/element/v1"      # 从浏览器开发者工具中获取的关键参数。     # cse_tok和cselibv通常是动态的，这里使用示例值，实际应用中可能需要更复杂的策略来获取。     # cx是Google CSE的ID，通常是固定的。     params = {         "rsz": "large",         "num": "16", # 每页图片数量         "hl": "en",         "source": "gcsc",         "gss": ".com",         "cselibv": "8e77c7877b8339e2", # 示例值，请从网络请求中获取最新         "searchtype": "image",         "cx": "015036873904746004277:nz7deehiccq", # Dermnet的CSE ID         "q": query,         "safe": "off",         "cse_tok": "AFW0emwRaupmNcwPmPDnZm7vKaJV:1684998350721", # 示例token，请从网络请求中获取最新         "exp": "csqr,cc,bf",         # "callback": "google.search.cse.api10440" # 如果直接请求JSON，可以不带callback参数     }      all_image_urls = []      for page in range(1, max_pages + 1):         print(f"Fetching page {page} for query: '{query}'")         # Google CSE API通过start参数控制分页，start表示从第几个结果开始         params["start"] = (page - 1) * int(params["num"]) + 1           try:             # 移除callback参数以获取纯JSON响应，如果存在的话             temp_params = params.copy()             if "callback" in temp_params:                 del temp_params["callback"]              # 模拟浏览器User-Agent             headers = {                 "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) appleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"             }              response = requests.get(base_api_url, params=temp_params, headers=headers, timeout=15)             response.raise_for_status() # 检查HTTP请求是否成功              # Google CSE API返回的响应通常是JSONP格式，即以函数调用