OpenClaw Node App 畫布（Canvas）指令完全攻略｜WebView、JavaScript、截圖、Screen 分頁
OpenClaw Node App 畫布（Canvas）指令完全攻略
這篇文章會介紹 OpenClaw Node App 的「畫布」功能，讓你能夠控制手機上的 WebView 來顯示網頁和執行 JavaScript。
>
實驗日期：2026-04-19
實驗設備：Vivo V2514（Android 16）
OpenClaw 版本：2026.4.19.14ver（已修復）
一、什麼是 Canvas 功能？
想像一下
當你安裝 OpenClaw Node App 並連線到你的手機後，你可以：
- 🌐 顯示網頁：在任何網站上顯示
- 📜 導航：像瀏覽器一樣導航到不同 URL
- 🔄 執行 JavaScript：在網頁上執行任意 JavaScript 代碼
- 📸 截圖：擷取 Canvas 畫面的截圖
實用場景
- 📊 資料視覺化：顯示圖表和數據儀表板
- 🤖 網頁自動化：執行 JavaScript 操作網頁
- 📸 頁面截圖：擷取特定網頁的畫面
- 🎮 互動式內容：顯示互動式網頁內容
二、Canvas 指令家族
根據官方文件和原始碼分析，Canvas 有 5 個指令：
三、指令詳細說明
1. canvas.present - 顯示 WebView
用途： 在手機上創建並顯示一個 WebView，載入指定 URL
指令格式：
openclaw nodes invoke --node "V2514" --command canvas.present --params '{
"url": "https://example.com"
}'參數說明：
2. canvas.hide - 隱藏 Canvas
用途： 隱藏 WebView（但不完全關閉）
指令格式：
openclaw nodes invoke --node "V2514" --command canvas.hide --params '{}'特點：
- 不需要任何參數
- 成功率 100%（總是可用）
- 可以隨時呼叫
3. canvas.navigate - 導航到 URL
用途： 在已存在的 WebView 中導航到新 URL
指令格式：
openclaw nodes invoke --node "V2514" --command canvas.navigate --params '{
"url": "https://www.google.com"
}'參數說明：
4. canvas.eval - 執行 JavaScript
用途： 在 WebView 中執行任意 JavaScript 代碼
指令格式：
openclaw nodes invoke --node "V2514" --command canvas.eval --params '{
"javaScript": "document.title"
}'參數說明：
回傳格式：
{
"ok": true,
"payload": {
"result": "\"Example Domain\""
}
}5. canvas.snapshot - 截取畫面
用途： 截取 WebView 當前顯示的畫面
指令格式：
openclaw nodes invoke --node "V2514" --command canvas.snapshot --params '{
"format": "png",
"quality": 0.9,
"maxWidth": 1024
}'參數說明：
回傳格式：
{
"ok": true,
"payload": {
"format": "png",
"base64": "iVBORw0KGgoAAAANSUhEUg..."
}
}四、實際測試結果
測試環境
- 設備：Vivo V2514（Android 16）
- 版本：2026.4.19.14ver
測試結果
測試過程
# 1. 顯示網頁
$ openclaw nodes invoke --node "V2514" --command canvas.present --params '{"url": "https://example.com"}'
{"ok": true, ...}
# 2. 執行 JavaScript（取得標題）
$ openclaw nodes invoke --node "V2514" --command canvas.eval --params '{"javaScript": "document.title"}'
{"ok": true, "payload": {"result": "\"Example Domain\""}}
# 3. 導航到 Google
$ openclaw nodes invoke --node "V2514" --command canvas.navigate --params '{"url": "https://www.google.com"}'
{"ok": true, ...}
# 4. 確認 URL
$ openclaw nodes invoke --node "V2514" --command canvas.eval --params '{"javaScript": "window.location.href"}'
{"ok": true, "payload": {"result": "\"https://www.google.com/\""}}
# 5. 隱藏
$ openclaw nodes invoke --node "V2514" --command canvas.hide --params '{}'
{"ok": true, ...}
# 6. 截圖
$ openclaw nodes invoke --node "V2514" --command canvas.snapshot --params '{"format": "png"}'
{"ok": true, "payload": {"format": "png", "base64": "..."}}五、功能可用性總結
六、使用範例
範例 1：顯示網頁並注入內容
# 顯示網頁
openclaw nodes invoke --node "V2514" --command canvas.present --params '{"url": "https://example.com"}'
# 注入自訂內容
openclaw nodes invoke --node "V2514" --command canvas.eval --params '{"javaScript": "document.body.innerHTML = \"<h1>Hello!</h1>\""}'範例 2：導航並截圖
# 導航到 Google
openclaw nodes invoke --node "V2514" --command canvas.navigate --params '{"url": "https://www.google.com"}'
# 截圖
openclaw nodes invoke --node "V2514" --command canvas.snapshot --params '{"format": "png"}'範例 3：取得網頁資訊
openclaw nodes invoke --node "V2514" --command canvas.present --params '{"url": "https://example.com"}'
# 取得標題
openclaw nodes invoke --node "V2514" --command canvas.eval --params '{"javaScript": "document.title"}'
# 取得 URL
openclaw nodes invoke --node "V2514" --command canvas.eval --params '{"javaScript": "window.location.href"}'七、Canvas 與 A2UI 的關係
除了基本的 Canvas 指令，還有 Canvas A2UI 功能：
A2UI 是 OpenClaw 的一種特殊模式，用於與 AI Agent 互動。
八、重要提示
⚠️ 必須切換到 Screen 分頁
很重要！
當你執行 canvas.present 或其他指令後，你需要在手機上切換到 Screen 分頁才能看到 WebView 的內容。
正確步驟：
1. 執行 canvas.present
2. 在手機上點擊「Screen」分頁
3. 看到 WebView 內容九、Android 上的使用注意事項
1. Screen 分頁
使用 Canvas 功能時，必須確保在 Screen 分頁上才能看到 WebView 的內容。
2. WebView 生命週期
- 當執行
canvas.present時，WebView 會被創建 - WebView 會保持在記憶體中，直到 App 被關閉或記憶體不足
- 使用
canvas.hide可以隱藏 WebView，但不會釋放記憶體
3. 網路問題
如果 URL 無法載入，可能是：
- 網站拒絕被嵌入（有些網站有 X-Frame-Options 限制）
- 網路連線問題
- URL 格式錯誤
十、常見問題
Q1：為什麼我看到的是空白頁面？
A：請確認：
- 執行了
canvas.present或canvas.navigate - 切換到 Screen 分頁（底部導航）
- 檢查 URL 是否正確
Q2：為什麼 JavaScript 注入沒有效果？
A：可能原因：
- 網站阻止了 JavaScript 注入
- JavaScript 代碼有語法錯誤
- 目標元素不存在
Q3：可以同時顯示多個 WebView 嗎？
A：目前每個 Node 只能有一個 WebView 實例。
Q4：WebView 會佔用多少記憶體？
A：一個 WebView 大約佔用 20-50MB 記憶體。為了節省資源，不使用時建議執行 canvas.hide。
Q5：截圖的 base64 太長怎麼辦？
A：可以設定 maxWidth 來限制圖片大小：
openclaw nodes invoke --node "V2514" --command canvas.snapshot --params '{"format": "png", "maxWidth": 800}'十一、與其他平台的比較
十二、技術備註
修復記錄
在 14ver（2026.4.19.14ver）中修復了以下問題：
- WebView 生命週期問題：修改
DisposableEffect加入visiblekey，避免 WebView 被過早銷毀 - isForeground 判斷：加入
canvas.hasWebView()檢查，確保 WebView 存在時可以執行指令 - 錯誤訊息改善：提供更具體的錯誤訊息幫助調試
原始碼修改
1. CanvasScreen.kt
DisposableEffect(viewModel, visible) {
onDispose {
// 保持 WebView 存活，只暫停不解毀
webView.pauseTimers()
webView.visibility = View.INVISIBLE
}
}2. CanvasController.kt
fun hasWebView(): Boolean = webView != null3. NodeRuntime.kt
isForeground = { _isForeground.value || canvas.hasWebView() }十三、結論
Canvas 功能是 OpenClaw Node App 中強大的功能之一，讓你能夠：
- 🌐 顯示任意網頁
- 📜 導航到不同 URL
- 🔄 執行 JavaScript
- 📸 截取畫面
在 Android 上，請記得：
- 執行指令後切換到 Screen 分頁
- 所有指令都完全可用
- 使用
canvas.hide可以節省記憶體
文章更新：2026-04-19（完整版）
感謝微風提供測試設備和建議！
留言
張貼留言
歡迎留下您的心靈足跡👍