如何用Python高效提取带PNG叠加层的SVG地图Web应用数据？

问题背景 #

我正在推进一个项目，需要从某魁北克省土地管理Web应用的地图中抓取数据，具体场景如下：

• 地图核心数据嵌入SVG中
• 目标信息需切换应用内特定选项才会显示
• 数据以PNG叠加层形式展示在SVG地图上，这些PNG对应应用计算出的特定位置

最初采用截图结合Pytesseract OCR提取信息，但OCR准确率低、易捕获无关数据，面对约500万条数据的处理需求，该方法完全不实用。需要一种更高效、高准确率的Python程序化提取方案。

方案1：直接抓取后端API数据（优先尝试） #

绝大多数Web应用的地图数据（包括SVG结构、PNG叠加层对应的位置信息）都是通过后端API异步加载的，这是效率最高、准确率100%的方案：

1. 定位API接口：用浏览器开发者工具（F12）的「网络」面板，切换应用内的目标选项，观察加载的XHR/Fetch请求，找到返回地图数据（含PNG位置、对应属性）的接口。
2. 模拟请求：用Python的requests库模拟这些请求，注意处理请求头（如User-Agent、Cookie，需先完成reCAPTCHA后获取有效会话）、选项切换对应的请求参数。
3. 解析响应：API返回的通常是JSON格式，直接提取所需的位置坐标、业务数据即可，无需处理图像，处理500万条数据的效率远超图像识别。

方案2：使用Playwright操控DOM与动态元素（次优选择） #

如果无法直接定位到API，可通过自动化浏览器工具操控页面，直接从DOM或渲染层提取结构化数据：

• Playwright（推荐）：比Selenium更现代稳定，支持直接获取SVG元素属性、监听PNG叠加层加载事件：

  1. 初始化浏览器会话，完成reCAPTCHA（可手动完成后保存会话，或使用合规的第三方服务自动处理）。
  2. 自动点击切换目标选项，等待PNG叠加层加载完成。
  3. 通过DOM选择器定位PNG元素，提取其style（含坐标）或data-*属性（含业务数据，多数应用会把数据存在元素属性中，而非仅渲染成图像）。

  核心代码示例：

  from playwright.sync_api import sync_playwright
  
  with sync_playwright() as p:
      browser = p.chromium.launch(headless=False)
      page = browser.new_page()
      page.goto("目标应用地址")
      # 手动完成reCAPTCHA后继续执行
      page.click("切换选项的CSS选择器")
      page.wait_for_selector("PNG叠加层的CSS选择器")
      
      markers = page.query_selector_all("PNG叠加层的CSS选择器")
      for marker in markers:
          position = marker.get_attribute("style")
          data = marker.get_attribute("data-info")
          print(f"位置：{position}，数据：{data}")
      browser.close()
  

• 优势：彻底避开OCR的准确率问题，直接提取结构化数据，适配需要交互的场景。

方案3：优化图像识别流程（备选，仅前两种方案不可行时使用） #

如果必须处理PNG图像，可通过以下步骤大幅提升OCR准确率：

1. 精准裁剪：用自动化工具定位每个PNG叠加层的精确位置，单独裁剪每个标记，避免无关内容干扰。
2. 图像预处理：用OpenCV对裁剪后的图像进行二值化、去噪、缩放处理，增强文字对比度：

   import cv2
   img = cv2.imread("single_marker.png", 0)
   # 二值化
   img = cv2.threshold(img, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)[1]
   # 去噪
   img = cv2.medianBlur(img, 3)
   

3. 替换OCR引擎：用EasyOCR替代Pytesseract，它对小字体、模糊文字的识别效果更好，支持多语言；也可针对目标文字训练自定义Tesseract语言包。

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