# @flesler/open-canvas 中文文档

规范地址：https://npmcn.com/package/%40flesler/open-canvas/

版本：1\.14\.0
npm 元数据更新时间：2026-11-15T21:00:04.279Z
中文译文更新时间：2026-11-14T22:53:29.623Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40flesler/open-canvas
原文对照：https://npmcn.com/package/%40flesler/open-canvas/?lang=original
项目主页：https://github.com/flesler/open-canvas#readme
源码仓库：https://github.com/flesler/open-canvas

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：59.1 kB，11 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.12\.0
- 运行依赖：19 个
- 首次发布：2026-10-13T03:20:03.099Z
- 最新版本发布：2026-11-15T21:00:04.147Z
- 近 30 天下载量：2146（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：27（近 12 个月 27 个）

## 中文简介

从.canvas.tsx到HTML、PNG、PDF、JPG或IDE-ready画布的方便代理画布视觉(图表、表格、UI)

## 安装

```sh
npm install @flesler/open-canvas
```

也可以使用：`pnpm add @flesler/open-canvas`、`yarn add @flesler/open-canvas`、`bun add @flesler/open-canvas`

## README

# 打开扫描片

**图表、表格和结构化视觉代理可以一发** ——从一出 `.canvas.tsx` 文件到 HTML, PNG, PDF, JPG, 或者一个 IDE 已准备好的画布 。 一样 `cursor/canvas` 原始人作为Cursor Canvas; **不需要光标应用程序** 用于建设或导出.

网络渲染使用 Maintine shim : **[光标扫描-网络](https://github.com/flesler/cursor-canvas-web)** (单位:千美元)`@flesler/cursor-canvas-web` 在npm上。 .

**现场实例 :** [光线](https://flesler.github.io/open-canvas/) • 妇女 [阴暗](https://flesler.github.io/open-canvas/dark.html)

![Showcase (light)](https://npmcn.com/package/%40flesler/open-canvas/docs/showcase-light.png) ![Showcase (dark)](https://npmcn.com/package/%40flesler/open-canvas/docs/showcase-dark.png)

## 安装

```bash
npm install -g @flesler/open-canvas
```

PNG、PDF和JPG使用无头铬(首先安装) `generate`) (中文(简体) ).

### 代理技能

```bash
open-canvas skill ~/.cursor/skills/open-canvas   # SKILL.md only — read after open-canvas is on PATH
```

为撰写和导出安装代理指南 `.canvas.tsx` 带有开放式扫描的文件.

## 提交人a `.canvas.tsx`

一个反应文件:图表、表格、挂图、表单——只从 `cursor/canvas`静态数据可以生活在兄弟会中 `./data/*` 文档。 保存的切换和形态状态可以生活在 `<stem>.canvas.data.json` 旁边的画布( 键与 `useCanvasState`) (中文(简体) ).

```tsx
import { Stack, H1, BarChart } from "cursor/canvas";
import report from "./data/report.json";
```

一些组件接受 `extra` 具有光标SDK以外的特性的道具,例如 `<BarChart extra={{ valueAxis: { scale: "log" } }} />`。光标忽略 `extra`所以画布还在那里 看见闪电了 [超级集文件](https://github.com/flesler/cursor-canvas-web/blob/main/COMPAT.md#superset)。 。 。 .

## 生成

```bash
open-canvas generate path/to/report.canvas.tsx
open-canvas verify path/to/report.canvas.tsx
```

| 命令 | 目的 |
| --- | --- |
| `generate <canvas>` | HTML、PNG、PDF( 默认) 输入 `./out` |
| `verify <canvas>` | 类型检查 `cursor/canvas` 数据进口 |
| `skill [dir]` | 打印或安装代理 `SKILL.md` |
| `vendor-path` | 打印捆绑 `cursor/canvas` 参考和 SDK 类型 |

| 旗帜 | 默认 |
| --- | --- |
| `-o`, (中文(简体) ), `--out` | `./out` 在画布旁边 |
| `-t`, (中文(简体) ), `--theme` | `light` 或者说 `dark` |
| `-f`, (中文(简体) ), `--formats` | `html,png,pdf` - 还有 `jpg`, (中文(简体) ), `cursor` |
| `-n`, (中文(简体) ), `--name` | 输出基名( 默认: 画布干) |
| `-w`, (中文(简体) ), `--width` | 播放窗口视图宽度( 默认) `1280`(中文(简体) ) |
| `--min-height` | 可选的 px 最小页面高度 |
| `--selector` | 只导出匹配的段落 |
| `--inline-state` | 与 `cursor`: 已嵌入 `.canvas.data.json` 在已发布文件中 |
| `-q`, (中文(简体) ), `--quiet` | 没有关于成功(产出)的定点值 `{--out}/{--name or stem}.{ext}`(中文(简体) ) |

出口读取 `.canvas.data.json` 当在现相. 单独运行 `generate` 用于 IDE 文件 : `open-canvas generate path/to/x.canvas.tsx --formats cursor` (可选择) `-o` 编号 : `-n` 页:1 `{dir}/{stem}.canvas.tsx`) (中文(简体) ). `--formats cursor` 内嵌 `./data/*`; 添加 `--inline-state` 包含已保存的 UI 状态.

画布代码中的主题 : **`useHostTheme()`** 在Cursor和出口中相同的钩和回取值。 使用 **`generate --theme`** 编号 : **`--brand`** 当您需要固定的光/暗或 Cursor/ Grok 在 png/html/pdf 中查看时.

## 许可证

麻省理工学院 - [自由主义](https://npmcn.com/package/%40flesler/open-canvas/LICENSE)。 。 。 .

## 常见问题

### @flesler/open-canvas 是什么？

从\.canvas\.tsx到HTML、PNG、PDF、JPG或IDE-ready画布的方便代理画布视觉\(图表、表格、UI\)

### 如何安装 @flesler/open-canvas？

在项目目录运行 npm install @flesler/open-canvas，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 open-canvas，可以用 npx open-canvas 直接运行。

### @flesler/open-canvas 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @flesler/open-canvas 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @flesler/open-canvas 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.12\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @flesler/open-canvas 可以商用吗？

@flesler/open-canvas 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @flesler/open-canvas 的下载量有多少？

根据 npm 官方下载统计，@flesler/open-canvas 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,146 次，日均约 72 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @flesler/open-canvas 还在维护吗？

最新版本 1\.14\.0 发布于 2026/11/16（今天）；至今共发布 27 个版本，其中过去 12 个月发布了 27 个；首次发布于 2026/10/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。