Browser Capture

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

核心原则

• - 只返回真正的图片，不返回图标、头像、logo、按钮等小图标
• 优先抓取详情页大图，而非缩略图列表
• 检查图片尺寸，过滤掉小尺寸图标

功能

• - browserscreenshot - 截取当前页面或指定页面截图
• browseropen - 打开网页
• browsernavigate - 导航到指定URL
• browsersnapshot - 获取页面ARIA快照（可提取图片链接）
• browserclick - 点击页面元素
• browserdownload - 点击元素并下载结果
• browser_evaluate - 执行JS代码获取元素信息

快速开始

1. 确保浏览器已启动

bash
openclaw browser start

2. 打开目标网页

bash
openclaw browser open https://example.com

3. 等待页面加载

bash
sleep 3

4. 获取页面元素快照

bash
openclaw browser snapshot

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

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

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

bash

获取所有图片元素的信息（尺寸、src等）

openclaw browser evaluate --fn () => {
const images = Array.from(document.querySelectorAll(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（过滤图标/头像）
• 不是网站的logo、图标、按钮图片
• 通常在 ul/li 列表或内容区域内

6. 点击进入详情页

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

bash

点击图片进入详情页（根据snapshot返回的ref编号）

openclaw browser click e109

7. 在详情页抓取大图

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

bash
openclaw browser screenshot

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

bash

查找最大图链接

openclaw browser snapshot

点击最大分辨率链接

openclaw browser click e47

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

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

步骤 1：启动浏览器并打开页面

bash
openclaw browser start
openclaw browser open https://image.baidu.com
sleep 3

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

bash
openclaw browser snapshot

步骤 3：分析图片元素，过滤小图标

bash

查找真正的图片（尺寸大于 300x200）

openclaw browser evaluate --fn () => {
const links = document.querySelectorAll(a[href*=\image.baidu.com/front/aigc\]);
const results = [];
links.forEach((link, i) => {
const img = link.querySelector(img);
if (img) {
const w = img.naturalWidth || img.width;
const h = img.naturalHeight || img.height;
if (w > 300 && h > 200) {
results.push({
index: i,
imgSrc: img.src,
width: w,
height: h
});
}
}
});
return JSON.stringify(results.slice(0, 5), null, 2);
}

步骤 4：点击第一张图片进入详情页

bash

根据上一步的分析结果，点击对应的链接元素

先获取详情页的 snapshot 看看有没有可点击的元素

openclaw browser snapshot

点击图片本身（通常是第一个大图的父级链接）

需要根据实际页面结构调整 ref 编号

openclaw browser click e141

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

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

bash

检查详情页是否有更大尺寸的图片

openclaw browser evaluate --fn () => {
const images = Array.from(document.querySelectorAll(img));
const results = [];
images.forEach((img, i) => {
const w = img.naturalWidth || img.width;
const h = img.naturalHeight || img.height;
if (w > 800 || h > 600) {
results.push({
index: i,
src: img.src,
width: w,
height: h
});
}
});
return JSON.stringify(results.slice(0, 3), null, 2);
}

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

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

bash

下载大图

curl -L 图片URL -o /path/to/save.jpg

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

1. 1. 截图保存当前页面
2. 或者查找页面中的查看原图、下载等按钮点击

常见问题

如何判断哪个是真正的图片

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

bash
openclaw browser evaluate --fn () => {
const images = document.querySelectorAll(img);
const results = [];
images.forEach((img, i) => {
const w = img.naturalWidth || img.width;
const h = img.naturalHeight || img.height;
if (w > 200 || h > 200) {
results.push({index: i, width: w, height: h, src: img.src.substring(0,80)});
}
});
return JSON.stringify(results);
}

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

browser命令报tab not found

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

1. 1. 重新打开页面：openclaw browser open
2. 或重启浏览器：openclaw browser stop && openclaw browser start

页面被 Cloudflare 拦截

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

1. 1. 等待更长时间让验证通过
2. 使用代理服务访问

截图保存在哪里

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

bash
cp ~/.openclaw/media/browser/xxx.png ~/workspace/

完整示例：智能抓取百度图片首页的大图

bash

1. 启动浏览器并打开百度图片

openclaw browser start
openclaw browser open https://image.baidu.com
sleep 3

2. 获取页面中的图片列表（过滤小图标）

openclaw browser evaluate --fn () => { const links = document.querySelectorAll(a[href*=\image.baidu.com/front/aigc\]); const results = []; links.forEach((link, i) => { const img = link.querySelector(img); if (img) { const w = img.naturalWidth || img.width; const h = img.naturalHeight || img.height; if (w > 300 && h > 200) { results.push({ index: i, src: img.src, width: w, height: h }); } } }); return JSON.stringify(results.slice(0, 5), null, 2); }

3. 点击第一张图片进入详情页

假设点击的是 e141（需要根据实际 snapshot 调整）

openclaw browser click e141

4. 等待详情页加载

sleep 3

5. 检查详情页是否有更大尺寸的图片

openclaw browser evaluate --fn () => { const images = Array.from(document.querySelectorAll(img)); const bigImages = images .map(img => ({ src: img.src, width: img.naturalWidth || img.width, height: img.naturalHeight || img.height })) .filter(img => img.width > 800 || img.height > 600); return JSON.stringify(bigImages.slice(0, 3), null, 2); }

6. 如果有大图，下载保存

假设获取到的第一个大图 URL 是: https://xxx.jpg

curl -L 大图URL -o ~/workspace/baidubigimage.jpg

7. 如果没有找到大图