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

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

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

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

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

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

---

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

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

---

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

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

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

项目依赖

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

---

核心代码示例

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、模板匹配、视频分析的视觉爬虫，将成为数据采集的新范式。