SuperAPI AI 工具集

json-render-image

设计与创作

查看项目

更新于 10-16 03:44

技能介绍

用途:@json-render/image 是一个图像渲染器,可将 JSON 规格(Spec)转换为 SVG 和 PNG 图像,底层使用 Satori。适合从结构化规格生成图像,例如 OG 图片等。

主要能力:提供 renderToSvg(渲染为 SVG 字符串)与 renderToPng(渲染为 PNG 缓冲区,需 @resvg/resvg-js)。包含 schema 图像元素架构、standardComponents 预置组件注册表、standardComponentDefinitions 供 AI 提示用的目录定义。标准组件涵盖 Frame(根容器,定义宽高与背景,必须为根)、Box、Row、Column 布局,Heading、Text、Image 内容,以及 Divider、Spacer 装饰。

使用方式:从 "@json-render/image/render" 导入 renderToPng,从 "@json-render/core" 导入 Spec 类型,构造含 root 与 elements 的 spec 后调用 renderToPng(spec, {fonts: [...]}),需提供字体数据。可用 defineCatalog 结合 schema 与 standardComponentDefinitions 定义目录;自定义组件用 zod 定义 props、slots 与 description。子路径导出包括 @json-render/image(完整包)、/server(仅 schema 与目录定义,不含 React/Satori)、/catalog(标准组件定义与类型)、/render(仅渲染函数)。

限制:资料未提供收费、价格、平台、性能或效果等信息;使用 renderToPng 需额外依赖 @resvg/resvg-js;渲染需自行提供字体数据。