Python中如何爬取动态生成的<canvas>标签图表？


Python中如何爬取动态生成的<canvas>标签图表？
1 回复

要爬取动态生成的 <canvas> 图表，关键在于获取其背后的数据源，而不是截图。<canvas> 本身是位图画布，无法直接提取结构化数据。通常数据是通过 JavaScript 动态加载的。以下是几种核心方法：

1. 直接查找数据接口（推荐） 这是最有效的方法。打开浏览器的开发者工具（F12），切换到 Network 标签页，然后刷新页面或触发图表加载。在请求列表中，重点关注 XHR 或 Fetch 类型的请求，寻找包含图表数据的接口（数据格式通常是 JSON）。找到后，直接用 requests 库模拟这个请求即可。

import requests
import json

# 示例：假设找到的数据接口
url = 'https://api.example.com/chart/data'
headers = {
    'User-Agent': 'Mozilla/5.0'
}
params = {
    'param1': 'value1'
}

response = requests.get(url, headers=headers, params=params)
data = response.json() # 直接获得结构化数据
print(json.dumps(data, indent=2))

2. 使用 Selenium 模拟浏览器并执行 JavaScript 如果数据是页面 JavaScript 计算后渲染的，没有独立接口，就需要用 selenium 这样的自动化工具加载完整页面，然后从页面全局变量 (window) 或执行脚本提取数据。

from selenium import webdriver
from selenium.webdriver.common.by import By
import time

driver = webdriver.Chrome()
driver.get('https://example.com/chart-page')

# 等待图表和其数据加载
time.sleep(3)

# 方法A：如果数据存储在 window 对象中，通过执行JS获取
chart_data = driver.execute_script('return window.chartData;')
print(chart_data)

# 方法B：如果图表库（如ECharts）有getOption方法
# chart_data = driver.execute_script('return myChart.getOption();')

driver.quit()

3. 逆向分析 JavaScript 代码 对于复杂情况，可能需要分析混淆过的 JS 代码，找到数据生成和加密的逻辑，然后用 Python 复现。这需要较强的逆向工程能力，通常结合浏览器开发者工具的 Sources 面板进行调试。

总结建议：优先从 Network 面板寻找直接的数据 API 接口。

回到顶部