// browserless API 教學
browserless API key 教學：讓自動化工具替你把網頁截取成圖片
如果你的自動化流程要把一段 HTML 變成圖片（社交媒體卡圖、輪播圖、報表截圖），就需要一個雲端瀏覽器。browserless.io 就是做這件事的服務：你把 HTML 傳過去，它回傳一張 PNG。這一頁帶你三分鐘取得 API key，並了解免費額度到底夠不夠用。
甚麼是 browserless？為甚麼截圖要用雲端瀏覽器？
browserless 是一個把瀏覽器放上雲端、開放 API 呼叫的服務。你傳送一段 HTML（或一條網址）過去，它在伺服器上開一個真正的 Chrome 把畫面渲染出來，然後把結果當成圖片或 PDF 傳回給你。
為甚麼不直接在自己的電腦截圖？因為自動化流程通常在雲端運行（例如你自行架設的 n8n），那邊沒有螢幕、也沒有安裝瀏覽器。就算你在本機裝了，只要電腦關機，流程就會中斷。把渲染這一步交給雲端服務，整條自動化才可以二十四小時無人值守地運行。
常見用途：
- 生成品牌圖卡：用 HTML 構建好版面（字體、顏色、排版全部由你控制），交給 browserless 截成 PNG。比起用設計工具逐張排版，便能完全自動化。
- 網頁存檔與 PDF：把一個網頁定時存成 PDF。
- 抓取需要 JavaScript 才顯示的內容：一般的抓取工具只拿得到原始 HTML，拿不到 JS 執行後的結果。
取得 browserless API key：詳細步驟
- 註冊 browserless.io：用電郵註冊即可，免費方案不需要信用卡。
- 在首頁複製 API key：登入之後，首頁的 API Key 一欄就直接顯示你的 key，按右邊的複製圖示。不用另外去設定頁找。
- 查看用量：前往 Dashboard，會見到 Cloud Subscription 顯示 0 / 1,000。免費方案有 1,000 個 unit，每截一張圖用一個。同一頁也會顯示並發上限。
- 在自動化工具貼上：以 n8n 為例：Credentials → 新增憑證 → 選 Query Auth（⚠️ 不是 Header Auth）→ 把 key 貼進值的欄位。之後截圖節點選擇這個憑證即可。
安全提醒：key 等同密碼。不要貼進公開的 GitHub、截圖或影片；錄影前先確認畫面沒有展開任何 key。萬一外露，回到後台重新產生一條，舊的即時失效。
登入 browserless.io 之後，首頁的 API Key 一欄直接顯示你的 key，按右邊圖示複製即可。
Dashboard 的 Cloud Subscription：免費方案 1,000 個 unit，每截一張圖用一個。
常見問題疑難排解
- 傳回
401 Unauthorized：多數是憑證類型選錯。browserless 的 key 是放在網址的查詢參數，不是放在 Authorization header。在 n8n 要選 Query Auth，不要選 Header Auth。 - 傳回
429或連線被拒：免費方案有並發上限（同一時間只能開有限數量的瀏覽器工作階段）。如果你一次要影五張圖而流程同時發五個請求，就會超出限制。解法是讓請求排隊逐張截圖，不要並發。 - 影出來是空白或缺字：通常是頁面還沒渲染完就截圖了，或者字體未載入。HTML 裏用網絡字體的話，要等字體載入完成再截圖；最穩妥的做法是把需要的字體直接內嵌，不靠外部載入。
- 中文字變成方格：伺服器上沒有你指定的中文字體。改用網絡字體或內嵌字體，不要假設伺服器有 PingFang、微軟正黑這類本機字體。
- 額度用得比預期快：每次截圖算一個單位。如果流程失敗後自動重試，重試也會計數。先確認流程穩定，再開自動重試。
常見問答
免費方案有 1,000 個 unit，每截一張圖用一個。假設每日出一個貼文、每個貼文五張輪播圖，即是每日五個單位，免費額度可以用超過半年。一般中小企的自動化用量完全不用擔心。
不需要。免費方案直接註冊即可使用，額度用完之前不會要求付款資料。
放在自動化工具的憑證管理員（例如 n8n 的 Credentials），不要直接寫進節點的網址或程式碼裏。這樣分享工作流程 JSON 給別人時，key 不會隨之外洩。錄影或截圖之前也記得確認畫面沒有展開任何 key。
同類服務有 Browserbase、ScreenshotOne 等；如果你自己有伺服器，也可以自行架設 Puppeteer 或 Playwright 來做同一件事。選 browserless 的原因是免費額度夠日常用、而且不用自己維護瀏覽器環境。
可以。呼叫時指定視窗寬度與高度與縮放倍率即可。做社交媒體圖卡通常會用正方形（例如 1080×1080）並開兩倍縮放，出來的圖比較銳利。
不會自動過期，但你隨時可以在後台重新產生一條。重新產生之後舊的即時失效，記得回到自動化工具更新憑證。
下一步
取得 key 之後，了解更多自動化應用：
- 多平台內容起稿引擎：一個選題自動生成三個平台的貼文，加一整套品牌輪播圖。browserless 負責的正是「截取圖卡」這一步。
截取的圖片要有地方存放並取得公開網址，詳細設定請參閱Cloudflare R2 設定完整指南。起稿用的 AI 在OpenAI API 設定完整指南。