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

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

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

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

API格式:https://imgx.zzao.club/api/img/[比例编号]/[模板编号]/[文本内容]?[参数]=xxx

如:https://imgx.zzao.club/api/img/001/001/Nuxt4从入门到放弃系列+点击就送屠龙宝刀

image

注意 color 不要带 #

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

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

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

image

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

image

语法含义说明
[]强调文字支持配置强调色,后续会支持多种强调方式
+换行文字主动换行,后续支持每行文字设置不同颜色
参数含义参考值说明
bgColor背景色292a3a-536976目前支持两个颜色,中间用-分割,从左到右径向渐变
accentColor强调色0088a9xxx 包裹的文字
color文字颜色ffffff当前表示所有文字的配色,即将支持多个颜色,匹配每行文字
ratio几倍图1要么 1 要么 2
center是否居中1默认左对齐,居中时为整体文字都居中

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

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

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

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

MIT

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

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

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

大家有喜欢的欢迎留言,我火速就给复刻出来。

目前还在不断的更新中。

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