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

相关推荐
shepherd枸杞泡茶30 分钟前
第6章 6.1 ASP.NET Core MVC 项目
后端·c#·asp.net·mvc
成长ing1213841 分钟前
cocos creator 放大镜效果
前端·cocos creator
橙子家1 小时前
nginx 简单实践:Web 缓存【nginx 实践系列之三】
后端
noravinsc1 小时前
vue2 definecomponent is not defined
前端·javascript·vue.js
禁默2 小时前
【学术投稿-2025年计算机视觉研究进展与应用国际学术会议 (ACVRA 2025)】CSS样式解析:行内、内部与外部样式的区别与优先级分析
前端·css
姚永强2 小时前
web前端第三次作业
前端·javascript·css
编程星空2 小时前
diff算法简析
前端·javascript·html
邢行行2 小时前
全面解析 CSS 常见简写语法及其使用规则
前端
田本初2 小时前
【React】如何画一个箭头
前端·react.js·前端框架
落榜美术生2 小时前
vite中的依赖预构建 到底是什么 做了什么
前端