Browser Capture

Browser Capture

使用 OpenClaw Browser 抓取网页截图和图片，智能识别真正的图片内容。

核心原则 只返回真正的图片，不返回图标、头像、记录o、按钮等小图标 优先抓取详情页大图，而非缩略图列表 检查图片尺寸，过滤掉小尺寸图标 功能 browser_screenshot - 截取当前页面或指定页面截图 browser_open - 打开网页 browser_navigate - 导航到指定URL browser_snapshot - 获取页面ARIA快照（可提取图片链接） browser_命令行工具ck - 点击页面元素 browser_下载 - 点击元素并下载结果 browser_evaluate - 执行JS代码获取元素信息 快速开始

• 确保浏览器已启动

OpenClaw browser 启动

• 打开目标网页

OpenClaw browser open "https://example.com"

• 等待页面加载

sleep 3

• 获取页面元素快照

OpenClaw browser snapshot

返回页面的ARIA树状结构，包含所有可交互元素的ref编号。

• 分析图片元素（关键步骤）

执行以下命令分析页面上的图片：

# 获取所有图片元素的信息（尺寸、src等） OpenClaw browser evaluate --fn "() => { const images = Array.from(document.查询SelectorAll('img')).map(img => ({ src: img.src, width: img.naturalWidth || img.width, height: img.naturalHeight || img.height, alt: img.alt, class: img.className, parent: img.parentElement?.tagName, parentClass: img.parentElement?.className })); return JSON.stringify(images.slice(0, 10), null, 2); }"

判断真正图片的规则：

宽度或高度 > 200px（过滤图标/头像） 不是网站的记录o、图标、按钮图片 通常在 ul/li 列表或内容区域内

• 点击进入详情页

根据分析结果，选择真正的图片链接进行点击：

# 点击图片进入详情页（根据snapshot返回的ref编号） OpenClaw browser 命令行工具ck e109

• 在详情页抓取大图

详情页通常有"View larger"或直接显示大图，截图保存：

OpenClaw browser screenshot

• 可选：点击查看最大分辨率

# 查找最大图链接 OpenClaw browser snapshot

# 点击最大分辨率链接 OpenClaw browser 命令行工具ck e47

智能抓取图片流程（推荐）

以下是一个完整的智能抓取流程：先确认是图片 → 点击进入详情页 → 判断是否有更大图 → 保存最佳质量图片。

步骤 1：启动浏览器并打开页面 OpenClaw browser 启动 OpenClaw browser open "https://image.bAIdu.com" sleep 3

步骤 2：获取页面快照，找到图片列表 OpenClaw browser snapshot

步骤 3：分析图片元素，过滤小图标 # 查找真正的图片（尺寸大于 300x200） OpenClaw browser evaluate --fn "() => { const links = document.查询SelectorAll('a[href=\"image.bAIdu.com/front/AIgc\"]'); const 结果s = []; links.forEach((link, i) => { const img = link.查询Selector('img'); if (img) { const w = img.naturalWidth || img.width; const h = img.naturalHeight || img.height; if (w > 300 && h > 200) { 结果s.push({ 索引: i, imgSrc: img.src, width: w, height: h }); } } }); return JSON.stringify(结果s.slice(0, 5), null, 2); }"

步骤 4：点击第一张图片进入详情页 # 根据上一步的分析结果，点击对应的链接元素 # 先获取详情页的 snapshot 看看有没有可点击的元素 OpenClaw browser snapshot

# 点击图片本身（通常是第一个大图的父级链接） # 需要根据实际页面结构调整 ref 编号 OpenClaw browser 命令行工具ck e141

步骤 5：在详情页检查是否有更清晰的大图

等待页面加载后，执行以下命令检查：

# 检查详情页是否有更大尺寸的图片 OpenClaw browser evaluate --fn "() => { const images = Array.from(document.查询SelectorAll('img')); const 结果s = []; images.forEach((img, i) => { const w = img.naturalWidth || img.width; const h = img.naturalHeight || img.height; if (w > 800 || h > 600) { 结果s.push({ 索引: i, src: img.src, width: w, height: h }); } }); return JSON.stringify(结果s.slice(0, 3), null, 2); }"

步骤 6：保存最佳质量的图片

如果详情页有大图，直接用 curl 下载：

# 下载大图 curl -L "图片URL" -o /path/to/save.jpg

如果详情页没有明显的大图，可以尝试：

截图保存当前页面 或者查找页面中的"查看原图"、"下载"等按钮点击 常见问题 如何判断哪个是真正的图片

执行 evaluate 命令分析图片尺寸：

OpenClaw browser evaluate --fn "() => { const images = document.查询SelectorAll('img'); const 结果s = []; images.forEach((img, i) => { const w = img.naturalWidth || img.width; const h = img.naturalHeight || img.height; if (w > 200 || h > 200) { 结果s.push({索引: i, width: w, height: h, src: img.src.substring(0,80)}); } }); return JSON.stringify(结果s); }"

只选择尺寸大于200x200的图片。

browser命令报"tab not found"

有时浏览器状态同步会出问题，尝试：

重新打开页面：OpenClaw browser open 或重启浏览器：OpenClaw browser 停止 && OpenClaw browser 启动 页面被 Cloudflare 拦截

某些网站有 Cloudflare 安全验证，headless 浏览器可能无法通过。可以尝试：

等待更长时间让验证通过 使用代理服务访问 截图保存在哪里

默认保存在 ~/.OpenClaw/media/browser/，可以手动复制到workspace：

cp ~/.OpenClaw/media/browser/xxx.png ~/workspace/

完整示例：智能抓取百度图片首页的大图 # 1. 启动浏览器并打开百度图片 OpenClaw browser 启动 OpenClaw browser open "https://image.bAIdu.com" sleep 3

# 2. 获取页面中的图片列表（过滤小图标） OpenClaw browser evaluate --fn "() => { const links = document.查询SelectorAll('a[href=\"image.bAIdu.com/front/AIgc\"]'); const 结果s = []; links.forEach((link, i) => { const img = link.查询Selector('img'); if (img) { const w = img.naturalWidth || img.width; const h = img.naturalHeight || img.height; if (w > 300 && h > 200) { 结果s.push({ 索引: i, src: img.src, width: w, height: h }); } } }); return JSON.stringify(结果s.slice(0, 5), null, 2); }"

# 3. 点击第一张图片进入详情页 # 假设点击的是 e141（需要根据实际 snapshot 调整） OpenClaw browser 命令行工具ck e141

# 4. 等待详情页加载 sleep 3

# 5. 检查详情页是否有更大尺寸的图片 OpenClaw browser evaluate --fn "() => { const images = Array.from(document.查询SelectorAll('img')); const bigImages = images .map(img => ({ src: img.src, width: img.naturalWidth || img.width, height: img.naturalHeight || img.height })) .过滤器(img => img.width > 800 || img.height > 600); return JSON.stringify(bigImages.slice(0, 3), null, 2); }"

# 6. 如果有大图，下载保存 # 假设获取到的第一个大图 URL 是: https://xxx.jpg