Browser Capture

Browser Capture

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

核心原则

功能

快速开始

1. 确保浏览器已启动

openclaw browser start

2. 打开目标网页

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

3. 等待页面加载

sleep 3

4. 获取页面元素快照

openclaw browser snapshot

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

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

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

# 获取所有图片元素的信息（尺寸、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);
}"

判断真正图片的规则：

6. 点击进入详情页

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

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

7. 在详情页抓取大图

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

openclaw browser screenshot

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

# 查找最大图链接
openclaw browser snapshot
点击最大分辨率链接
openclaw browser click e47

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

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

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

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

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

openclaw browser snapshot

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

# 查找真正的图片（尺寸大于 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：点击第一张图片进入详情页

# 根据上一步的分析结果，点击对应的链接元素
先获取详情页的 snapshot 看看有没有可点击的元素
openclaw browser snapshot
点击图片本身（通常是第一个大图的父级链接）
需要根据实际页面结构调整 ref 编号
openclaw browser click e141

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

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

# 检查详情页是否有更大尺寸的图片
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 下载：

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

如果详情页没有明显的大图，可以尝试： 1. 截图保存当前页面 2. 或者查找页面中的"查看原图"、"下载"等按钮点击

常见问题

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

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

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. 重新打开页面：openclaw browser open 2. 或重启浏览器：openclaw browser stop && openclaw browser start

页面被 Cloudflare 拦截

某些网站有 Cloudflare 安全验证，headless 浏览器可能无法通过。可以尝试： 1. 等待更长时间让验证通过 2. 使用代理服务访问

截图保存在哪里

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

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

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

# 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/baidu_big_image.jpg
7. 如果没有找到大图，直接截取当前页面
openclaw browser screenshot

判断大图的关键逻辑

| 页面类型 | 判断条件 | 处理方式 | |---------|---------|---------| | 图片列表页 | 缩略图通常 < 500px | 需要点击进入详情页 | | 详情页 | 图片 > 800px | 直接下载 | | 详情页 | 有"查看原图"按钮 | 点击后再下载最大图 | | 详情页 | 仍是小图 | 截图保存当前页面 |

工具说明

| 工具 | 说明 | 示例 | |------|------|------| | browser_screenshot | 截取当前标签页截图 | openclaw browser screenshot | | browser_open | 在新标签打开URL | openclaw browser open "URL" | | browser_navigate | 当前标签导航 | openclaw browser navigate "URL" | | browser_snapshot | 获取页面ARIA树 | openclaw browser snapshot | | browser_click | 点击元素 | openclaw browser click e109 | | browser_evaluate | 执行JS获取元素详情 | 见上文示例 | | browser_tabs | 列出所有标签 | openclaw browser tabs | | browser_tab_select | 切换标签 | openclaw browser tab select 1 |

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

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

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. 重新打开页面：openclaw browser open 2. 或重启浏览器：openclaw browser stop && openclaw browser start

页面被 Cloudflare 拦截

某些网站有 Cloudflare 安全验证，headless 浏览器可能无法通过。可以尝试： 1. 等待更长时间让验证通过 2. 使用代理服务访问

截图保存在哪里

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

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