生成图片
基于 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 分钟，请及时下载或展示图片。超时后，重新请求即可获取新的访问链接。
示例
下面是一个完整的请求示例，展示了如何注册一个名为 Geist 的自定义网络字体，并在 content 的行内样式中成功应用它：
curl -X POST http://localhost:8080/v1/images/render \
-H "Content-Type: application/json" \
-d '{
"content": "<div style={{ fontFamily: \"Geist\", fontSize: \"48px\", color: \"#333\" }}>Hello Custom Font</div>",
"width": 800,
"height": 400,
"format": "png",
"fonts": [
{
"familyName": "Geist",
"fontUrls": [
"https://www.imgrender.net/test-assets/resvg/fonts/Geist/Geist-VariableFont_wght.ttf"
]
}
]
}'const payload = {
content: `<div style={{ fontFamily: 'Geist', fontSize: '48px', color: '#333' }}>
Hello Custom Font
</div>`,
width: 800,
height: 400,
format: "png",
fonts: [
{
familyName: "Geist",
fontUrls: [
"https://www.imgrender.net/test-assets/resvg/fonts/Geist/Geist-VariableFont_wght.ttf"
]
}
]
};
fetch('http://localhost:8080/v1/images/render', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
})
.then(res => res.blob())
.then(blob => console.log('图片生成成功，已接收到 Blob 数据！'));