name: browser-capture description: 使用 OpenClaw Browser 抓取網頁截圖和圖片，智慧識別真正的圖片內容 metadata: { "openclaw": { "emoji": "📸", "requires": { "openclaw": ">=0.15" }, }, }

Browser Capture

使用 OpenClaw Browser 抓取網頁截圖和圖片，智慧識別真正的圖片內容。

核心原則

• 只返回真正的圖片，不返回圖示、頭像、logo、按鈕等小圖示
• 優先抓取詳情頁大圖，而非縮圖列表
• 檢查圖片尺寸，過濾掉小尺寸圖示

功能

• browser_screenshot - 擷取當前頁面或指定頁面截圖
• browser_open - 開啟網頁
• browser_navigate - 導航到指定URL
• browser_snapshot - 獲取頁面ARIA快照（可提取圖片連結）
• browser_click - 點選頁面元素
• browser_download - 點選元素並下載結果
• browser_evaluate - 執行JS程式碼獲取元素資訊

快速開始

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);
}"

判斷真正圖片的規則： - 寬度或高度 > 200px（過濾圖示/頭像） - 不是網站的logo、圖示、按鈕圖片 - 通常在 ul/li 列表或內容區域內

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 <URL> 2. 或重啟瀏覽器：openclaw browser stop && openclaw browser start

頁面被 Cloudflare 攔截

7w4.net收錄了海量優質技能外掛。

某些網站有 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

判斷大圖的關鍵邏輯

工具說明

這個 Skill 質量中規中矩，主要優點是文件詳細、步驟清晰，能夠幫助使用者快速上手網頁圖片抓取。內建了智慧圖片過濾邏輯，可以區分真正的圖片和小圖示。不足之處是文件偏向命令列操作說明，與實際工具呼叫存在一定差距；功能相對基礎，缺少更智慧的自動化判斷能力。對於需要複雜圖片抓取場景的使用者來說，可能需要自行補充更多判斷邏輯。總體而言，這是一個可用但功能深度有限的 Skill。