Canvas

Name: Canvas
Rating: 3.5 (1 reviews)
Author: tao880511

By tao880511 👁 46 views ▲ 0 votes

OpenClaw Canvas Plugin with 970x600 example

GitHub

Configuration Example

{
  "plugins": {
    "entries": {
      "canvas": {
        "enabled": true,
        "config": {
          "host": {
            "enabled": true,
            "root": "~/.openclaw/canvas",
            "liveReload": true
          }
        }
      }
    }
  }
}

README

# OpenClaw Canvas Plugin

Canvas 插件为 OpenClaw 提供在配对节点（Mac/iOS/Android）上渲染 HTML/CSS/JS 画布的能力，并支持截图生成指定像素尺寸的图片。

## 功能特性

- **画布托管**：在 `~/.openclaw/canvas/` 目录下托管静态 HTML/JS/CSS 文件
- **节点渲染**：通过 WebView 在配对设备上渲染画布内容
- **快照截图**：支持指定像素尺寸（如 970×600）生成 PNG/JPEG 图片
- **热重载**：开发时文件修改自动刷新节点端画面

## 快速开始

### 1. 启用插件

在 `~/.openclaw/openclaw.json` 中添加：

```json
{
  "plugins": {
    "entries": {
      "canvas": {
        "enabled": true,
        "config": {
          "host": {
            "enabled": true,
            "root": "~/.openclaw/canvas",
            "liveReload": true
          }
        }
      }
    }
  }
}
```

重启 Gateway 后插件生效。

### 2. 创建画布页面

在 `~/.openclaw/canvas/` 下创建 HTML 文件，例如 `970x600.html`：

```html
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>970×600 Canvas</title>
  <style>
    html, body {
      margin: 0; padding: 0;
      width: 970px; height: 600px;
      overflow: hidden;
    }
    canvas { display: block; }
  </style>
</head>
<body>
  <canvas id="main" width="970" height="600"></canvas>
  <script>
    const ctx = document.getElementById('main').getContext('2d');
    // 你的绘图代码
  </script>
</body>
</html>
```

**关键点**：
- `<canvas width="970" height="600">` 设置绘图缓冲区像素
- CSS `width: 970px; height: 600px` 固定视口尺寸

### 3. 在节点上呈现

通过 Canvas tool 的 `present` 动作打开：

```json
{
  "action": "present",
  "targetId": "<node-tab-id>",
  "url": "/__openclaw__/canvas/970x600.html"
}
```

### 4. 生成指定尺寸图片

使用 `snapshot` 动作截图：

```json
{
  "action": "snapshot",
  "targetId": "<node-tab-id>",
  "width": 970,
  "height": 600,
  "type": "png"
}
```

返回的 `mediaId` 可直接通过 `message` 工具发送到聊天。

## 目录结构

```
src/                    # 插件核心代码
├── index.js           # 主入口
├── runtime-api.js     # 运行时 API
├── setup-api.js       # 安装/配置 API
├── cli-metadata.js    # CLI 元数据
├── openclaw.plugin.json
└── package.json

canvas-host/            # 静态托管文件
└── a2ui/              # A2UI 界面资源
    ├── index.html
    ├── a2ui.bundle.js
    └── assets/

examples/               # 示例画布
└── 970x600.html       # 970×600 示例页面

SKILL.md               # 技能文档
```

## 配置说明

| 路径 | 说明 | 默认值 |
|------|------|--------|
| `plugins.entries.canvas.enabled` | 启用插件 | `false` |
| `plugins.entries.canvas.config.host.enabled` | 启用本地文件服务器 | `true` |
| `plugins.entries.canvas.config.host.root` | 画布文件根目录 | `~/.openclaw/canvas` |
| `plugins.entries.canvas.config.host.liveReload` | 启用热重载 | `true` |

## API 路由

| 路径 | 说明 |
|------|------|
| `GET /__openclaw__/canvas/` | 目录列表 |
| `GET /__openclaw__/canvas/<file>.html` | 托管画布文件 |
| `GET /__openclaw__/canvas/a2ui/` | A2UI 界面 |

## 开发调试

1. 本机浏览器打开 `http://<gateway-host>:18789/__openclaw__/canvas/970x600.html` 验证渲染
2. 检查节点网络可达性（防火墙、Tailscale、LAN IP）
3. 使用 `snapshot` 对比实际输出像素尺寸

## 许可证

MIT

tools