SuperAPI AI 工具集

json-render-image

设计与创作

查看项目

更新于 10-15 17:23

技能介绍

@json-render/image 是一个图像渲染器,使用 Satori 将 JSON 规格转换为 SVG 和 PNG 图像,适用于生成 OG 图片等场景。

用途:将结构化 JSON 描述(Spec)渲染为图像。核心入口为 renderToSvg(输出 SVG 字符串)与 renderToPng(输出 PNG 缓冲区,需 @resvg/resvg-js)。

主要能力:内置标准组件,包括 Frame(根容器,定义宽高与背景,必须为根)、Box(含 padding、margin、border、绝对定位)、Row/Column(水平/垂直 flex 布局)、Heading(h1-h4)、Text、Image(来自 URL)、Divider、Spacer。可通过 defineCatalog 与 zod 定义自定义组件。

使用方式:示例代码展示先构造 Spec(含 root 与 elements),再用 renderToPng(spec, {fonts: [...]}) 输出 PNG,字体需以 name、data、weight、style 传入。标准组件可通过 defineCatalog(schema, {components: standardComponentDefinitions}) 注册。子路径导出包括 @json-render/image(完整包)、/server(仅 schema 与 catalog 定义,无 React/Satori)、/catalog(标准组件定义与类型)、/render(仅渲染函数)。

限制:渲染 PNG 需额外依赖 @resvg/resvg-js;字体数据需自行提供;其余限制资料未提供。