快速开始
在模板编辑器中设计模板，调用 API 传入变量即可生成图片
介绍
imgrender 提供的高性能图片生成服务，可以使你的应用快速拥有图片生成能力，可用于自动生成海报、证书、商品封面图、博客封面、个性化广告图...
推荐工作流：在 模板编辑器 中用 JSX/HTML 设计模板并定义变量，发布后调用 基于模板生成图片 API，只需传入变量值即可生成图片。
核心功能
模板即图片
在模板编辑器中用 JSX/HTML 设计模板并定义变量。业务侧调用 API 时只需传入模板 ID 和变量值，即可渲染输出高质量图片（支持 WebP、PNG、JPEG 格式）。支持内联样式和 Tailwind CSS 类名，前端开发者零学习成本上手。
| 特性 | 说明 |
|---|---|
| 模板复用 | 设计一次模板，业务侧只传变量，不必每次提交完整 JSX/HTML |
| 简单易用 | 传入模板 ID 和变量，返回图片链接，无需搭建渲染服务 |
| 高性能 | 服务端渲染，毫秒级响应，无需担心浏览器环境开销 |
| 灵活定制 | 支持按请求覆盖尺寸、格式、质量；模板内可使用变量、条件与循环 |
| 样式丰富 | 模板支持内联 style 和 Tailwind CSS 类名，轻松实现复杂布局 |
快速上手
只需 3 步，即可开始使用 imgrender：
1. 注册并获取 API Key
访问 imgrender 控制台，注册账号并登录。
登录后，进入 API Keys 页面，点击 "创建 API Key" 即可生成 API Key。API Key 格式为：数字.随机字符串。
安全提示
API Key 是调用服务的凭证，请妥善保管，不要提交到公开代码仓库或泄露给他人。
2. 创建并发布模板
打开 模板编辑器，用 JSX/HTML 编写模板，并用 {$ 变量名 $} 把需要动态替换的内容参数化。保存并发布后，在控制台模板详情页获取模板 ID。
必须先发布
线上接口默认使用已发布内容。模板未发布或已归档时，调用会返回 409。调试草稿时可在请求中设置
useDraft: true。
3. 调用 API
将下面示例中的 YOUR_API_KEY 和 tpl_xxx 替换为你的 API Key 与模板 ID，即可生成图片：
const response = await fetch(
'https://api.imgrender.net/open/v1/images/templates/tpl_xxx/render',
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-Key': 'YOUR_API_KEY',
},
body: JSON.stringify({
variables: {
title: 'Hello imgrender!',
},
format: 'png',
}),
},
)
const result = await response.json()
console.log('图片链接：', result.data.url)curl -X POST 'https://api.imgrender.net/open/v1/images/templates/tpl_xxx/render' \
-H 'Content-Type: application/json' \
-H 'X-API-Key: YOUR_API_KEY' \
-d '{
"variables": {
"title": "Hello imgrender!"
},
"format": "png"
}'请求成功后，响应示例：
{
"code": 0,
"message": "ok",
"data": {
"url": "https://res.imgrender.net/xxx.jpg?sign=xxx"
}
}图片链接有效期
返回的图片链接有效期为 5 分钟，请及时下载或展示图片。超时后重新请求即可获取新的链接。
其他调用方式
若不想保存模板、希望每次请求传入完整 JSX/HTML，可使用 基于 JSX/HTML 生成图片 API。生产环境更推荐基于模板的接口。