# @dloizides/poster-render 中文文档

规范地址：https://npmcn.com/package/%40dloizides/poster-render/

版本：0\.14\.0
npm 元数据更新时间：2026-10-30T13:15:43.024Z
中文译文更新时间：2026-11-12T12:47:33.177Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：595 kB，10 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18\.0\.0
- 运行依赖：0 个
- 首次发布：2026-10-27T17:34:03.035Z
- 最新版本发布：2026-10-30T13:15:42.784Z
- 近 30 天下载量：4973（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：27（近 12 个月 27 个）

## 中文简介

从一个JSON文档中取出海报和传单渲染: FlierDoc JSON Schema + 校验器,一种纯画布渲染(doc,资产,画布),带有布局,格式,调色板和字体集,以及PNG导出. 图片包含 + 主播, 从未裁剪过, 什么都没有

## 安装

```sh
npm install @dloizides/poster-render
```

也可以使用：`pnpm add @dloizides/poster-render`、`yarn add @dloizides/poster-render`、`bun add @dloizides/poster-render`

## README

# @dloizides/ 贴纸手

一份JSON文件`FlierDoc`在,一个海报出来。 由Flier Studio使用(FLIER-1"Flier Studio").

-   `flierDocSchema`JSON·斯克马 `FlierDoc` (输入LLM作为 `response_format`) (中文(简体) ).
-   `validateFlierDoc(input)`数字 : `{ ok, doc }` 或者说 `{ ok: false, errors }`; 已读出错误 `blocks.title: is required`。 。 。 .
-   `render(doc, assets, canvas)`: 先验证( 扔出) `FlierDocError` 在触摸画布之前,将画布的大小调整到格式,绘制,返回 a `RenderReport` (图片回转,文本和纸箱).
-   `exportPng(canvas)`页:1 `Blob` 画布大小.
-   格式:故事1080x1920,后1080x1350,正方形1080x1080,电话1170x2532,桌面2560x1440.
-   布局 : `picture-right` (E-A"右针"), `picture-left` (E-B"左相"),"左相", `arch` (E-C "Arch" ), (中文(简体) ), `picture-bottom`, (中文(简体) ), `list`, (中文(简体) ), `phone-clock-safe` (P-A"Phone, clock clear":顶部保持清空,用于锁屏时钟),, `phone-arch` (P-B"手机拱门"), `desktop-safe` (D-A"Desktop,图标清除":文本清除桌面图标和任务栏), `desktop-arch` (D-B"德士克托克拱门". `LAYOUT_CATALOGUE` 列出id、设计id、标签、描述和设计的格式(用于应用程序取取器和LLM提示); `defaultLayoutFor(format)` 给予E-A"右相"/P-A"电话,时钟清"/D-A"德士克托克,图标清"(D4"Layouts: keep all").
-   拱形布局画出一个柔和的拱形 (palette) `arch`图片区内部; 价格在两边都很大。 包含的块被设定为每行一个大小. 调色板 : `sand`, (中文(简体) ), `night`, (中文(简体) ), `sea`, (中文(简体) ), `rose`。字体设定 : `classic`, (中文(简体) ), `modern`, (中文(简体) ), `elegant` (应用程序加载网页字体).
-   可选 `tuning` (每个主题覆盖, 不包含=布局默认): `headerGap` (0-200 px at a 1080 short ledge) 当头部坐在上面时,在最后一个头线下最远处开始身体; `itemDateScale` (0.5-2) 缩放列表日期脚本.
-   图片放入了自己区域内的+主播:从未被裁剪过,从未被淡出过,最后被抽出过,本地区也没有设置出文字或卡片. 文字收缩以适应,从来不溢出.
-   示例 `kizombaWorkshopDocs` (3个讲习班+名单传单), `kizombaWorkshop` (列表传单).

## 安装

```bash
npm install @dloizides/poster-render
```

## 使用量

```ts
import { exportPng, kizombaWorkshop, render, validateFlierDoc } from '@dloizides/poster-render';

const checked = validateFlierDoc(kizombaWorkshop);
if (!checked.ok) {
  throw new Error(checked.errors.join('\n'));
}
const canvas = document.createElement('canvas');
const report = render(checked.doc, { dancers: pictureImage, logo: logoImage }, canvas);
const png = await exportPng(canvas);
```

## 帆布喷射

`render` 取出带有 2d 上下文的任何画布; 软件包没有画布依赖性.

-   浏览器: a `HTMLCanvasElement` (或 `OffscreenCanvas`); 资产已装入 `HTMLImageElement` 编号 : `ImageBitmap`。 。 。 .
-   节点 : `@napi-rs/canvas` (单位:千美元)`createCanvas(1, 1)`, (中文(简体) ), `loadImage(path)`(三); `render` 将画布调整为格式.

## 字体

字体设置名称 CSS 家族(`FONT_SETS`) (中文(简体) ). 主机之前装入过 `render`: 在浏览器中 `document.fonts.load(...)` 编号 : `@font-face`在节点中 `GlobalFonts.registerFromPath` 从 `@napi-rs/canvas`。缺失的字体会回到默认的家族,文本仍然适合.

## 类型地板

每个文本运行在1080个短边上至少为30px(桌面为2560x1440上为40px). 当一个布局无法在会场符合其文本时,图片会给文本空间.

## 每行样式和领带

```ts
import { LineAlign, sameSize, sameWidth } from '@dloizides/poster-render';

let doc = { ...base, lineStyles: { footer: { font: 'Georgia', sizeScale: 1.2, color: '#1f2a44', weight: 600, italic: true, letterSpacing: 0.05, align: LineAlign.Center } } };
doc = sameWidth(doc, 'title', 'titleBottom');
doc = sameSize(doc, 'venue.1', 'footer');
```

-   密钥 : `title`, (中文(简体) ), `titleBottom`, (中文(简体) ), `script`, (中文(简体) ), `footer`, (中文(简体) ), `includes.heading`, (中文(简体) ), `includes.items.N`, (中文(简体) ), `venue.N`, (中文(简体) ), `schedule.N.label|time`, (中文(简体) ), `prices.N.amount|label`, (中文(简体) ), `items.N.date|price|schedule.M` (单位:千美元)`LINE_KEY_PATTERN`) (中文(简体) ).
-   当行设置在一行( compact)时, 合并行的样式为 `schedule.N.label` 编号 : `prices.N.amount`。 。 。 .
-   宽的领带将更窄的行向更宽的行向上,盖在柱子上;大小的领带取去两者仍然相合的更宽的行向. 铁丝网在一个文本区(头部,身体或侧翼)内活动.
-   医生没有 `lineStyles` 财务报告和审定财务报表 `lineTies` 和以前一样.

## Schema 版本策略

`FlierDoc.version` 实值 `1`。作为可选保存版本1而添加的字段;被删除、重新命名或重打的字段提高了版本和 `validateFlierDoc` 以 `version: must be 1 (got N)`。一个软件包主要发布时,会附带一个新的文件版本.

## 常见问题

### @dloizides/poster-render 是什么？

从一个JSON文档中取出海报和传单渲染: FlierDoc JSON Schema \+ 校验器,一种纯画布渲染\(doc,资产,画布\),带有布局,格式,调色板和字体集,以及PNG导出\. 图片包含 \+ 主播, 从未裁剪过, 什么都没有

### 如何安装 @dloizides/poster-render？

在项目目录运行 npm install @dloizides/poster-render，或使用 pnpm add / yarn add / bun add。

### @dloizides/poster-render 支持 TypeScript 吗？

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

### @dloizides/poster-render 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @dloizides/poster-render 需要什么版本的 Node\.js？

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

### @dloizides/poster-render 可以商用吗？

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

### @dloizides/poster-render 的下载量有多少？

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

### @dloizides/poster-render 还在维护吗？

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