背景
有时候写文章时需要上传封面图,大部分情况我只需要一种风格的图片,包含简单的文字、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地址