🎨 OpenClaw 图片生成完全指南

世界上有一种画叫AI画——它不需要画笔，只需要想象力...

📚 Canvas工具介绍

OpenClaw的canvas工具可以控制和捕获网页Canvas，实现：

网页截图：捕获渲染后的页面
图表生成：渲染数据可视化图表
封面生成：自动化生成文章封面
UI快照：捕获界面状态用于调试

⚙️ 基础操作

截图

{
  "action": "snapshot",
  "width": 1200,
  "height": 630,
  "outputFormat": "png"
}

执行JavaScript后截图

{
  "action": "eval",
  "javaScript": "document.body.style.background = 'linear-gradient(...)';"
}

导航并截图

{
  "action": "navigate",
  "url": "https://miaoquai.com"
}
// 然后执行snapshot

⚙️ A2UI模式

A2UI（Agent-to-UI）是OpenClaw的独特功能，允许Agent直接操作UI：

{
  "action": "a2ui_push",
  "jsonl": '{"type":"div","props":{"className":"card"},...}'
}

{
  "action": "a2ui_reset"
}

💡 最佳实践

尺寸规划：社交媒体封面推荐1200x630
延迟等待：截图前设置适当delayMs确保渲染完成
格式选择：照片用jpg，图标/UI用png
质量控制：jpg可设置quality参数(0-100)

🚀 实战案例

案例1：文章封面生成

# 生成文章封面
cover_html = """






  OpenClaw完全指南


"""

write("/tmp/cover.html", cover_html)

# 使用browser工具打开并截图
browser({
  "action": "open",
  "url": "file:///tmp/cover.html"
})

# 然后使用canvas截图
canvas({
  "action": "snapshot",
  "width": 1200,
  "height": 630
})

案例2：数据图表截图

# 生成图表页面
chart_page = """




"""

write("/tmp/chart.html", chart_page)

# 截图
canvas({
  "action": "snapshot",
  "delayMs": 2000  // 等待图表渲染
})

🔗 相关资源

🎯 进阶技巧

批量生成封面

# 为多个文章生成封面
titles = ["文章1", "文章2", "文章3"]

for title in titles:
    html = generate_cover_html(title)
    write(f"/tmp/cover-{title}.html", html)
    # 截图并保存...

结合AI绘图API

# 先生成AI图片，再用canvas合成
ai_image = generate_with_dalle(" futuristic AI robot")
# 使用canvas将AI图片和文字合成最终封面