@dloizides/ 贴纸手
一份JSON文件FlierDoc在,一个海报出来。 由Flier Studio使用(FLIER-1"Flier Studio").
flierDocSchemaJSON·斯克马FlierDoc(输入LLM作为response_format) (中文(简体) ).validateFlierDoc(input)数字 :{ ok, doc }或者说{ ok: false, errors }; 已读出错误blocks.title: is required。 。 。 .render(doc, assets, canvas): 先验证( 扔出)FlierDocError在触摸画布之前,将画布的大小调整到格式,绘制,返回 aRenderReport(图片回转,文本和纸箱).exportPng(canvas)页:1Blob画布大小.- 格式:故事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(列表传单).
安装
npm install @dloizides/poster-render
使用量
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). 当一个布局无法在会场符合其文本时,图片会给文本空间.
每行样式和领带
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)。一个软件包主要发布时,会附带一个新的文件版本.