如何使用Python爬取Flutter CanvasKit渲染器构建的网页数据

该需求完全可以实现，核心思路是绕过DOM层直接通过UI交互+内容识别的方式获取数据，以下是Python生态下的可落地方案：

参考截图 #

首选方案：UI自动化+OCR识别（通用无侵入） #

这个方案不需要逆向站点逻辑，适配所有Canvas渲染的前端应用，实现门槛最低：

• 依赖组件：用Playwright控制浏览器完成点击、滚动、截图操作，用PaddleOCR识别截图中的属性文本
• 操作步骤：
  1. 安装依赖包：

     pip install playwright paddlepaddle paddleocr
     playwright install chromium
     

  2. 启动浏览器打开目标站点，等待Flutter应用完全加载（至少预留3秒加载时间，确认canvas渲染完成）
  3. 根据行高固定的特征，逐行计算坐标点击列表行，再点击固定位置的右上角信息按钮
  4. 等待属性弹窗弹出后，对弹窗区域单独截图，用OCR识别文本后按属性名匹配提取对应值
  5. 完成一行提取后关闭弹窗，滚动列表继续处理下一行，直到所有行遍历完成

示例代码 #

from playwright.sync_api import sync_playwright
from paddleocr import PaddleOCR

# 初始化OCR模型，仅需要运行一次
ocr = PaddleOCR(use_angle_cls=True, lang='ch', show_log=False)

# 配置参数（根据自己的界面实际尺寸调整）
LIST_START_Y = 200  # 第一行列表的Y坐标
ROW_HEIGHT = 60     # 每行列表的高度
INFO_BTN_X = 1200   # 信息按钮的X坐标
INFO_BTN_Y = 180    # 信息按钮的Y坐标
PROP_POPUP_AREA = {"x": 600, "y": 300, "width": 600, "height": 400} # 属性弹窗截图区域

with sync_playwright() as p:
    # 启动浏览器，headless改为True可后台运行
    browser = p.chromium.launch(headless=False, args=["--start-maximized"])
    page = browser.new_page(viewport={"width": 1920, "height": 1080})
    page.goto("替换为你的目标站点地址")
    # 等待Flutter应用加载完成
    page.wait_for_selector("canvas", timeout=15000)
    page.wait_for_timeout(3000)

    # 示例遍历前5行
    for i in range(5):
        # 点击对应行
        current_row_y = LIST_START_Y + i * ROW_HEIGHT
        page.mouse.click(x=500, y=current_row_y)
        page.wait_for_timeout(500)
        # 点击信息按钮
        page.mouse.click(x=INFO_BTN_X, y=INFO_BTN_Y)
        page.wait_for_timeout(1000)
        # 截图属性弹窗并识别
        popup_img = page.screenshot(clip=PROP_POPUP_AREA)
        ocr_result = ocr.ocr(popup_img, cls=True)
        # 解析识别结果提取属性
        prop_dict = {}
        for line in ocr_result[0]:
            text, confidence = line[1]
            if ":" in text:
                k, v = text.split(":", 1)
                prop_dict[k.strip()] = v.strip()
        print(f"第{i+1}行属性：", prop_dict)
        # 点击空白处关闭弹窗
        page.mouse.click(x=100, y=100)
        page.wait_for_timeout(500)

    browser.close()

优化建议 #

• 如果界面分辨率不固定，可以用OpenCV的模板匹配功能定位信息按钮、弹窗等固定元素，自动计算坐标，适配不同显示尺寸
• OCR识别准确率不足时，可以先对截图做二值化、降噪、对比度调整等预处理，提升识别精度
• 如果站点有反爬检测，可以给Playwright添加stealth插件隐藏自动化特征，避免被拦截

备选高阶方案：Flutter渲染树解析 #

如果目标站点没有关闭Flutter的调试通道，可以通过对接Dart VM Service协议直接获取组件树的属性数据，不需要OCR识别，效率更高，但实现复杂度也更高，适合有Flutter开发经验的开发者使用。

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