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

809 阅读3分钟

背景

有时候写文章时需要上传封面图,大部分情况我只需要一种风格的图片,包含简单的文字、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默认左对齐,居中时为整体文字都居中

技术方面

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

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

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

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

MIT

后续规划

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

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

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

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

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

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

欢迎Star、PR

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