视觉分析开发范例：Puppeteer截图＋计算机视觉动态定位

一、选型背景：传统爬虫已无力应对的视觉挑战

在现代互联网环境中，尤其是小红书、抖音、B站等视觉驱动型平台，传统基于 HTML 的爬虫已经难以满足精准数据采集需求：

内容加载由 JS 动态触发，难以直接解析 HTML；
视频、图片等关键元素无法通过 DOM 提取；
页面元素位置随屏幕尺寸、渲染行为而变化。

为此，「视觉爬虫」应运而生。通过浏览器自动化 + 截图 + 图像识别，可以突破传统爬虫的局限，抓取"人眼所见"的页面内容。

本文聚焦在 Puppeteer 驱动浏览器自动化，并结合计算机视觉实现页面元素的动态定位与信息提取。

二、技术对比维度：DOM vs. 视觉爬虫

对比维度	传统 DOM 爬虫	视觉爬虫（Puppeteer + CV）
页面解析方式	HTML 文档结构	可视化渲染页面截图
定位元素依据	CSS/XPath/Selector	图像特征（坐标、形状、文字）
动态内容支持	差，依赖额外执行 JS	强，浏览器真实执行环境
稳定性	页面结构变动易失效	图像特征变化小，较稳
技术难度	低	中高，涉及计算机视觉处理

三、代码对比示例：关键词搜索＋视频截图＋视觉定位

下面通过 Puppeteer + Node.js 实现小红书视频搜索 + 播放 + 屏幕截图 + 图像识别定位关键区域，并设置代理等提供采集成功率。

💡 目标任务：搜索关键词"旅行vlog"，点击第一个视频并截图视频播放页，对播放按钮等进行视觉定位。

项目依赖

bash 复制代码

npm install puppeteer-extra puppeteer-extra-plugin-stealth tesseract.js sharp

核心代码示例

javascript 复制代码

const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
const tesseract = require('tesseract.js'); // 用于图像识别
const sharp = require('sharp');            // 图像裁剪处理

puppeteer.use(StealthPlugin());

(async () => {
  // 爬虫代理配置（亿牛云示例 www.16yun.cn）
  const proxyHost = 'proxy.16yun.cn';
  const proxyPort = '31000';
  const proxyUser = '16YUN';
  const proxyPass = '16IP';

  // Puppeteer 启动带代理
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      `--proxy-server=http://${proxyHost}:${proxyPort}`,
    ],
  });

  const page = await browser.newPage();

  // 设置 User-Agent 和 Cookie（模拟真实用户）
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36');

  await page.setCookie({
    name: 'xhsTracker',
    value: 'your_cookie_value',
    domain: '.xiaohongshu.com'
  });

  // 设置代理认证
  await page.authenticate({
    username: proxyUser,
    password: proxyPass,
  });

  // 打开小红书搜索页面
  const keyword = '旅行vlog';
  await page.goto(`https://www.xiaohongshu.com/search_result?keyword=${encodeURIComponent(keyword)}`, {
    waitUntil: 'networkidle2'
  });

  await page.waitForTimeout(3000); // 等待页面加载

  // 点击第一个视频内容
  const videoSelector = 'div.video-feed-container div.feed-video-card:first-child';
  await page.waitForSelector(videoSelector);
  await page.click(videoSelector);

  // 等待视频播放页加载
  await page.waitForTimeout(5000);

  // 截图当前页面
  const screenshotPath = 'screenshot.png';
  await page.screenshot({ path: screenshotPath, fullPage: true });
  console.log('页面截图已保存:', screenshotPath);

  // 对截图进行图像识别（找出"暂停/播放按钮"等图标）
  const croppedPath = 'video_button_crop.png';

  // 示例：裁剪中间区域（大概率是播放按钮）
  await sharp(screenshotPath)
    .extract({ left: 500, top: 300, width: 300, height: 200 }) // 可按实际屏幕调整
    .toFile(croppedPath);

  console.log('已裁剪截图区域:', croppedPath);

  // 使用 Tesseract 识别该区域的文本（可替换为模板匹配找图标）
  const result = await tesseract.recognize(croppedPath, 'eng', {
    logger: m => console.log(m)
  });

  console.log('识别结果：', result.data.text);

  await browser.close();
})();

四、场景推荐

适用场景	推荐方式
采集结构化信息（如商品价格）	传统 DOM 爬虫足够
视频截图、播放状态分析	Puppeteer + CV 更适合
页面强 JS 渲染（如小红书）	Puppeteer 更有优势
动态内容 + 图像定位	Puppeteer + 图像识别最强

五、结论：让"爬虫看见"比"爬虫看懂"更重要

随着视觉化内容成为主流，"看见"页面比"理解 HTML"更关键。Puppeteer 结合计算机视觉不仅可以真实再现页面内容，还能识别图像中的元素，为复杂场景提供强有力的支持。

尤其在小红书等平台，传统 DOM 爬虫几乎"寸步难行"，而视觉爬虫打开了新一代内容采集的大门。未来，结合 OCR、模板匹配、视频分析的视觉爬虫，将成为数据采集的新范式。