基于 JSX/HTML 生成图片
每次传入完整 JSX/HTML 生成图片。生产环境更推荐基于模板生成图片 API。
更推荐基于模板的接口
大多数业务场景请使用 基于模板生成图片 API：在 Playground 中保存并发布模板后，请求时只需传入变量。
本接口适用于不保存模板、每次传入完整 JSX/HTML 的一次性渲染。
通过该接口，你可以将 JSX/HTML 代码片段直接生成并导出为高质量的图片（支持 WebP、PNG、JPEG）。
请求
请求方法与 URL
POST https://api.imgrender.net/open/v1/images/render请求头参数
| 字段 | 数据类型 | 必填 | 描述 |
|---|---|---|---|
| X-API-Key | string | yes | 用于请求授权，请参考 请求认证方式 |
| Content-Type | string | yes | 固定值："application/json; charset=utf-8" |
请求体参数
| 字段名 | 类型 | 必填 | 描述 | 默认值 |
|---|---|---|---|---|
content | string | 是 | 描述图片布局和内容的 JSX/HTML 字符串。写法见 模板开发指南 | - |
width | number | 否 | 输出图片的宽度（像素）。不传则根据内容自适应。 | - |
height | number | 否 | 输出图片的高度（像素）。不传则根据内容自适应。 | - |
format | string | 否 | 输出图片的格式。支持 png、jpeg、webp。 | webp |
quality | number | 否 | 图片质量（0-100），仅对 jpeg 和 webp 格式有效。 | - |
fonts | array | 否 | 自定义字体配置列表，用于在内容中加载和渲染外部字体。详情见 自定义字体 | [] |
响应
当请求成功时，HTTP 状态码为 200，并且会以 JSON 格式返回数据：
{
"code": 0,
"message": "ok",
"data": {
"url": "https://res.imgrender.net/6e31cfcd683a36d0522a8cc34e244379.jpg?sign=xxx"
}
}code：错误码，当错误码为0时，表示处理成功，其他值表示存在一定的问题。message：提示信息，与code相对应，更多提示信息可查看状态码与错误码。data：返回的数据。当code为0时返回，其中url为图片链接。图片链接的有效期为 5 分钟，请及时下载或展示图片。超时后，重新请求即可获取新的访问链接。
示例
下面是一个完整的请求示例，展示如何传入 JSX/HTML 并生成图片：
curl -X POST https://api.imgrender.net/open/v1/images/render \
-H "Content-Type: application/json" \
-H "X-API-Key: YOUR_API_KEY" \
-d '{
"content": "<div style={{ backgroundColor: \"#3b82f6\", padding: \"40px\", borderRadius: \"12px\" }}><span style={{ color: \"white\", fontSize: \"32px\", fontWeight: \"bold\" }}>Hello imgrender!</span></div>",
"width": 800,
"height": 400,
"format": "png"
}'const payload = {
content:
'<div style={{ backgroundColor: "#3b82f6", padding: "40px", borderRadius: "12px" }}><span style={{ color: "white", fontSize: "32px", fontWeight: "bold" }}>Hello imgrender!</span></div>',
width: 800,
height: 400,
format: 'png',
}
fetch('https://api.imgrender.net/open/v1/images/render', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-Key': 'YOUR_API_KEY',
},
body: JSON.stringify(payload),
})
.then((res) => res.json())
.then((result) => console.log('图片链接：', result.data.url))如需在请求中注册自定义网络字体，见 自定义字体。