[{"data":1,"prerenderedAt":405},["ShallowReactive",2],{"page-/post/imgx/one-url-generate-unique-png":3,"surrounding-page":396},{"id":4,"title":5,"author":6,"body":7,"date":384,"description":63,"extension":385,"group":6,"lastmod":386,"meta":387,"navigation":388,"path":389,"rawbody":390,"seo":391,"showTitle":5,"stem":392,"tags":393,"versions":6,"__hash__":395},"content/post/imgx/one-url-generate-unique-png.md","一行 URL 动态生成生成封面，免费、开源、高效",null,{"type":8,"value":9,"toc":371},"minimark",[10,14,23,26,29,32,35,45,58,64,69,72,96,100,111,114,119,122,127,130,186,189,282,285,300,328,334,337,340,343,350,359,362,365,368],[11,12,13],"h2",{"id":13},"背景",[15,16,17,18,22],"p",{},"有时候写文章时需要上传封面图，大部分情况我只需要",[19,20,21],"strong",{},"一种风格的图片","，包含简单的文字、LOGO、强调文字等即可。",[15,24,25],{},"现有的各种 App 、Web 的卡片类应用都需要我打开他们的平台，然后选择合适的模板，最后还要充个会员，不然就限制我下载图片的大小，给我加个水印什么的。",[15,27,28],{},"此 API 可以帮助我快速在任意场景下拿到一张想要的图片。必要时可以下载，临时使用直接用链接。",[15,30,31],{},"并且如果是文章中配图，大部分技术平台都支持自动转存，很省心。",[11,33,34],{"id":34},"使用",[15,36,37,38],{},"API格式：",[39,40,44],"a",{"href":41,"rel":42},"https://imgx.zzao.club/api/img/%5B%E6%AF%94%E4%BE%8B%E7%BC%96%E5%8F%B7%5D/%5B%E6%A8%A1%E6%9D%BF%E7%BC%96%E5%8F%B7%5D/%5B%E6%96%87%E6%9C%AC%E5%86%85%E5%AE%B9%5D?%5B%E5%8F%82%E6%95%B0%5D=xxx",[43],"nofollow","https://imgx.zzao.club/api/img/[比例编号]/[模板编号]/[文本内容]?[参数]=xxx",[15,46,47,48],{},"如：",[39,49,52,53,57],{"href":50,"rel":51},"https://imgx.zzao.club/api/img/001/001/%5BNuxt4%5D%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E6%94%BE%E5%BC%83%E7%B3%BB%E5%88%97+%E7%82%B9%E5%87%BB%E5%B0%B1%E9%80%81%E5%B1%A0%E9%BE%99%E5%AE%9D%E5%88%80",[43],"https://imgx.zzao.club/api/img/001/001/",[54,55,56],"span",{},"Nuxt4","从入门到放弃系列+点击就送屠龙宝刀",[15,59,60],{},[61,62],"img",{"alt":63,"src":50},"",[15,65,66],{},[19,67,68],{},"注意 color 不要带 #",[11,70,71],{"id":71},"比例",[73,74,75,79,82,85,88,91],"ul",{},[76,77,78],"li",{},"001：2.35:1 => 公众号",[76,80,81],{},"002：1:1 => 头像",[76,83,84],{},"003: 4:3 => ?",[76,86,87],{},"004: 3:4 => 小红书等",[76,89,90],{},"005: 16:9 => 视频封面",[76,92,93],{},[19,94,95],{},"新比例请联系我～",[97,98,99],"h3",{"id":99},"模板001",[15,101,102,103,106,107,110],{},"此模板针对 ",[19,104,105],{},"字数不多","、",[19,108,109],{},"字号较大"," 的使用场景。 比如文章封面、部分自媒体平台的配图。",[15,112,113],{},"比如高清(x2)的公众号封面配图（2.35:1）",[15,115,116],{},[61,117],{"alt":63,"src":118},"https://imgx.zzao.club/api/img/001/001/*Deepseek*+108%E5%A4%A7%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7+%E5%8F%AA%E5%89%A9+*66*%E4%B8%AA%E5%90%8D%E9%A2%9D?bgColor=ff758c-ff7eb3&accentColor=0088a9&color=ffffff&ratio=2",[15,120,121],{},"比如小红书配图（3:4）",[15,123,124],{},[61,125],{"alt":63,"src":126},"https://imgx.zzao.club/api/img/004/001/*Deepseek*+108%E5%A4%A7%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7+%E5%8F%AA%E5%89%A9+*66*%E4%B8%AA%E5%90%8D%E9%A2%9D?bgColor=ff7e5f-feb47b&accentColor=0088a9&color=ffffff&ratio=2&center=1",[11,128,129],{"id":129},"语法",[131,132,133,148],"table",{},[134,135,136],"thead",{},[137,138,139,142,145],"tr",{},[140,141,129],"th",{},[140,143,144],{},"含义",[140,146,147],{},"说明",[149,150,151,170],"tbody",{},[137,152,153,160,163],{},[154,155,156],"td",{},[157,158,159],"code",{},"[]",[154,161,162],{},"强调文字",[154,164,165,166,169],{},"支持配置强调色，",[19,167,168],{},"后续","会支持多种强调方式",[137,171,172,177,180],{},[154,173,174],{},[157,175,176],{},"+",[154,178,179],{},"换行",[154,181,182,183,185],{},"文字主动换行，",[19,184,168],{},"支持每行文字设置不同颜色",[11,187,188],{"id":188},"参数",[131,190,191,204],{},[134,192,193],{},[137,194,195,197,199,202],{},[140,196,188],{},[140,198,144],{},[140,200,201],{},"参考值",[140,203,147],{},[149,205,206,224,241,255,269],{},[137,207,208,211,214,217],{},[154,209,210],{},"bgColor",[154,212,213],{},"背景色",[154,215,216],{},"292a3a-536976",[154,218,219,220,223],{},"目前支持两个颜色，中间用",[157,221,222],{},"-","分割，从左到右径向渐变",[137,225,226,229,232,235],{},[154,227,228],{},"accentColor",[154,230,231],{},"强调色",[154,233,234],{},"0088a9",[154,236,237,240],{},[54,238,239],{},"xxx"," 包裹的文字",[137,242,243,246,249,252],{},[154,244,245],{},"color",[154,247,248],{},"文字颜色",[154,250,251],{},"ffffff",[154,253,254],{},"当前表示所有文字的配色，即将支持多个颜色，匹配每行文字",[137,256,257,260,263,266],{},[154,258,259],{},"ratio",[154,261,262],{},"几倍图",[154,264,265],{},"1",[154,267,268],{},"要么 1 要么 2",[137,270,271,274,277,279],{},[154,272,273],{},"center",[154,275,276],{},"是否居中",[154,278,265],{},[154,280,281],{},"默认左对齐，居中时为整体文字都居中",[11,283,284],{"id":284},"技术方面",[15,286,287,288,291,292,295,296,299],{},"核心是 ",[157,289,290],{},"satori"," 和 ",[157,293,294],{},"satori-html"," 这两个插件。没有用到无头浏览器 ",[157,297,298],{},"puppeteer"," 之类的，太重，太消耗服务器资源了。",[15,301,302,303,306,307,291,310,313,314,316,317,320,321,324,325,327],{},"项目是 ",[157,304,305],{},"Nuxt"," 搭建的，通过 ",[157,308,309],{},"createSSRApp",[157,311,312],{},"renderToString","，就可以拿到自己写好的 Vue 组件给 ",[157,315,290],{}," 渲染了，再把渲染后的 ",[157,318,319],{},"svg"," 转为 ",[157,322,323],{},"png",", 接口直接把 ",[157,326,323],{}," 返回",[15,329,330,331,333],{},"所以这个接口就类似于动态内容的 ",[157,332,323],{}," 图片了",[15,335,336],{},"有条件的可以自己部署一下。",[15,338,339],{},"MIT",[11,341,342],{"id":342},"后续规划",[15,344,345,346,349],{},"后面的使用继续朝着",[19,347,348],{},"极简","的方向走",[15,351,352,355,356,358],{},[19,353,354],{},"选取上述的参数、尺寸、模板，保存为预设码","，请求时携带一个简短的",[157,357,157],{},"来生成图片，不需要再输入一大串参，只传递文字就可以拿到自己常用的图片。",[15,360,361],{},"再个就是多加几个常用的模板了，比如其他卡片应用的模板。",[15,363,364],{},"大家有喜欢的欢迎留言，我火速就给复刻出来。",[15,366,367],{},"目前还在不断的更新中。",[15,369,370],{},"如果你有更好的建议，或是有心仪的模板，欢迎私信我！💌",{"title":63,"searchDepth":372,"depth":372,"links":373},2,[374,375,376,380,381,382,383],{"id":13,"depth":372,"text":13},{"id":34,"depth":372,"text":34},{"id":71,"depth":372,"text":71,"children":377},[378],{"id":99,"depth":379,"text":99},3,{"id":129,"depth":372,"text":129},{"id":188,"depth":372,"text":188},{"id":284,"depth":372,"text":284},{"id":342,"depth":372,"text":342},"2025-02-19T00:00:00.000Z","md","2025-08-19T00:00:00.000Z",{},true,"/post/imgx/one-url-generate-unique-png","---\ntitle: 一行 URL 动态生成生成封面，免费、开源、高效\ndate: 2025-02-19\nlastmod: 2025-08-19\nshowTitle: 一行 URL 动态生成生成封面，免费、开源、高效\ntags: [\"Nuxt\", \"IMGX\"]\n\n---\n## 背景\n\n有时候写文章时需要上传封面图，大部分情况我只需要**一种风格的图片**，包含简单的文字、LOGO、强调文字等即可。\n\n现有的各种 App 、Web 的卡片类应用都需要我打开他们的平台，然后选择合适的模板，最后还要充个会员，不然就限制我下载图片的大小，给我加个水印什么的。\n\n此 API 可以帮助我快速在任意场景下拿到一张想要的图片。必要时可以下载，临时使用直接用链接。\n\n并且如果是文章中配图，大部分技术平台都支持自动转存，很省心。\n\n## 使用\n\nAPI格式：https://imgx.zzao.club/api/img/[比例编号]/[模板编号]/[文本内容]?[参数]=xxx\n\n如：[https://imgx.zzao.club/api/img/001/001/[Nuxt4]从入门到放弃系列+点击就送屠龙宝刀](https://imgx.zzao.club/api/img/001/001/%5BNuxt4%5D%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E6%94%BE%E5%BC%83%E7%B3%BB%E5%88%97+%E7%82%B9%E5%87%BB%E5%B0%B1%E9%80%81%E5%B1%A0%E9%BE%99%E5%AE%9D%E5%88%80)\n\n![](https://imgx.zzao.club/api/img/001/001/%5BNuxt4%5D%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E6%94%BE%E5%BC%83%E7%B3%BB%E5%88%97+%E7%82%B9%E5%87%BB%E5%B0%B1%E9%80%81%E5%B1%A0%E9%BE%99%E5%AE%9D%E5%88%80)\n\n**注意 color 不要带 #**\n## 比例\n\n- 001：2.35:1 => 公众号\n- 002：1:1 => 头像\n- 003: 4:3 => ?\n- 004: 3:4 => 小红书等\n- 005: 16:9 => 视频封面\n-  **新比例请联系我～**\n\n### 模板001\n\n此模板针对 **字数不多**、**字号较大** 的使用场景。 比如文章封面、部分自媒体平台的配图。\n\n比如高清(x2)的公众号封面配图（2.35:1）\n\n![](https://imgx.zzao.club/api/img/001/001/*Deepseek*+108大使用技巧+只剩+*66*个名额?bgColor=ff758c-ff7eb3&accentColor=0088a9&color=ffffff&ratio=2)\n\n比如小红书配图（3:4）\n\n![](https://imgx.zzao.club/api/img/004/001/*Deepseek*+108大使用技巧+只剩+*66*个名额?bgColor=ff7e5f-feb47b&accentColor=0088a9&color=ffffff&ratio=2&center=1)\n\n## 语法\n| 语法 | 含义 | 说明 |\n| --- | --- | --- |\n| `[]` | 强调文字 | 支持配置强调色，**后续**会支持多种强调方式 |\n| `+` | 换行 | 文字主动换行，**后续**支持每行文字设置不同颜色 |\n## 参数\n\n| 参数          | 含义   | 参考值           | 说明                          |\n| ----------- | ---- | ------------- | --------------------------- |\n| bgColor     | 背景色  | 292a3a-536976 | 目前支持两个颜色，中间用`-`分割，从左到右径向渐变  |\n| accentColor | 强调色  | 0088a9        | [xxx] 包裹的文字                 |\n| color       | 文字颜色 | ffffff        | 当前表示所有文字的配色，即将支持多个颜色，匹配每行文字 |\n| ratio       | 几倍图  | 1             | 要么 1 要么 2                   |\n| center      | 是否居中 | 1             | 默认左对齐，居中时为整体文字都居中           |\n## 技术方面\n\n核心是 `satori` 和 `satori-html` 这两个插件。没有用到无头浏览器 `puppeteer` 之类的，太重，太消耗服务器资源了。\n\n项目是 `Nuxt` 搭建的，通过 `createSSRApp` 和 `renderToString`，就可以拿到自己写好的 Vue 组件给 `satori` 渲染了，再把渲染后的 `svg` 转为 `png`, 接口直接把 `png` 返回\n\n所以这个接口就类似于动态内容的 `png` 图片了\n\n有条件的可以自己部署一下。\n\nMIT\n\n## 后续规划\n\n后面的使用继续朝着**极简**的方向走\n\n**选取上述的参数、尺寸、模板，保存为预设码**，请求时携带一个简短的`code`来生成图片，不需要再输入一大串参，只传递文字就可以拿到自己常用的图片。\n\n再个就是多加几个常用的模板了，比如其他卡片应用的模板。\n\n大家有喜欢的欢迎留言，我火速就给复刻出来。\n\n目前还在不断的更新中。\n\n如果你有更好的建议，或是有心仪的模板，欢迎私信我！💌",{"title":5,"description":63},"post/imgx/one-url-generate-unique-png",[305,394],"IMGX","nai4Lkm6rm1-Ai26uigtajy8ioTPJVve_RdWIhHCsLE",[397,401],{"title":398,"path":399,"stem":400},"OpenClaw 安装入门（Windows）","/post/zzao/openclaw/openclaw-install-windows","post/zzao/openclaw/openclaw-install-windows",{"title":402,"path":403,"stem":404},"假设你是AI，你的Skill应该是什么样的","/post/zzao/ai-skill-structure","post/zzao/ai-skill-structure",1779005086091]