一行 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地址

相关推荐
JianZhen✓5 分钟前
现在在本地开发了一些代码A,又有了新需求要紧急开发代码B需要只上线代码B的代码,如何更好的处理这种情况
前端
青皮桔6 分钟前
Java+OpenCV实现图片切割
java·后端·opencv·计算机视觉
兮动人11 分钟前
Spring中@Configuration注解的proxyBeanMethods属性详解
java·后端·spring
郝学胜-神的一滴24 分钟前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
蒙奇D索大1 小时前
【计算机网络】408计算机网络高分指南:物理层编码与调制技术精讲
java·前端·学习·计算机网络
无盐海1 小时前
CSRF漏洞攻击(跨站请求伪造攻击)
前端·csrf
慧一居士1 小时前
CSS3 全部功能点介绍,使用场景,对应功能点完整使用示例
前端
烛阴1 小时前
深入Lua包(Package)与依赖管理
前端·lua
Jing_jing_X2 小时前
Spring 自动注入是怎么实现的?从 @Component 到 @Autowired 的完整流程
java·后端·spring
IT_陈寒2 小时前
5个Vue3性能优化技巧,让你的应用提速50% 🚀(附实测对比)
前端·人工智能·后端