一行 URL 动态生成生成封面,免费、开源、高效

背景

有时候写文章时需要上传封面图,大部分情况我只需要一种风格的图片,包含简单的文字、LOGO、强调文字等即可。

现有的各种 App 、Web 的卡片类应用都需要我打开他们的平台,然后选择合适的模板,最后还要充个会员,不然就限制我下载图片的大小,给我加个水印什么的。

此 API 可以帮助我快速在任意场景下拿到一张想要的图片。必要时可以下载,临时使用直接用链接。

并且如果是文章中配图,大部分技术平台都支持自动转存,很省心。

使用

API格式:imgx.zzao.club/api/img/[比例...

如:imgx.zzao.club/api/img/001...

注意 color 不要带 #

比例

  • 001:2.35:1 => 公众号
  • 002:1:1 => 头像
  • 003: 4:3 => ?
  • 004: 3:4 => 小红书等
  • 005: 16:9 => 视频封面
  • 新比例请联系我~

模板001

此模板针对 字数不多字号较大 的使用场景。 比如文章封面、部分自媒体平台的配图。

比如高清(x2)的公众号封面配图(2.35:1)

比如小红书配图(3:4)

语法

语法 含义 说明
[] 强调文字 支持配置强调色,后续会支持多种强调方式
+ 换行 文字主动换行,后续支持每行文字设置不同颜色

参数

参数 含义 参考值 说明
bgColor 背景色 292a3a-536976 目前支持两个颜色,中间用-分割,从左到右径向渐变
accentColor 强调色 0088a9 xxx 包裹的文字
color 文字颜色 ffffff 当前表示所有文字的配色,即将支持多个颜色,匹配每行文字
ratio 几倍图 1 要么 1 要么 2
center 是否居中 1 默认左对齐,居中时为整体文字都居中

技术方面

核心是 satorisatori-html 这两个插件。没有用到无头浏览器 puppeteer 之类的,太重,太消耗服务器资源了。

项目是 Nuxt 搭建的,通过 createSSRApprenderToString,就可以拿到自己写好的 Vue 组件给 satori 渲染了,再把渲染后的 svg 转为 png, 接口直接把 png 返回

所以这个接口就类似于动态内容的 png 图片了

有条件的可以自己部署一下。

MIT

后续规划

后面的使用继续朝着极简的方向走

选取上述的参数、尺寸、模板,保存为预设码 ,请求时携带一个简短的code来生成图片,不需要再输入一大串参,只传递文字就可以拿到自己常用的图片。

再个就是多加几个常用的模板了,比如其他卡片应用的模板。

大家有喜欢的欢迎留言,我尽快复刻出来。

目前还处于开发初期,持续更新中。

如果你有更好的建议,或是有心仪的模板,欢迎私信我!💌

欢迎Star、PR

对你有用的话,求个 Star!🤪GITHUB地址

相关推荐
Aphasia311几秒前
从输入URL到页面展示全流程
前端·面试
我叫黑大帅30 分钟前
前端如何竖屏固定视口背景
前端·javascript·面试
abcy07121333 分钟前
python pandas csv异步后台清洗前端优先返回成功信息
前端·python·pandas
IT空门:门主1 小时前
Spring 注入三剑客:@Resource、@Autowired、@RequiredArgsConstructor 到底该用哪个?
java·后端·spring
ServBay1 小时前
云端 AI 蜜月期宣告结束,为什么 2026 年开发者转向本地优先架构
后端·ai编程
IT_陈寒1 小时前
Vite这个坑我帮你踩了,动态导入居然这样才生效
前端·人工智能·后端
swipe1 小时前
Mem0 x Agent 实战系列:分层记忆 + 三路召回,搭建真正可用的长期记忆层
前端·javascript·面试
鹤鸣的日常1 小时前
前端运行时动态环境变量方案
前端·react.js·docker·前端框架·vue·gitlab
Lee川1 小时前
Event Loop 面试通关:从原理到口述再到实战
前端·面试
Sam_Deep_Thinking1 小时前
Spring Boot 的启动原理是什么?
java·spring boot·后端