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

相关推荐
前端爆冲几秒前
项目中无用export的检测方案
前端
HelloDam几秒前
基于元素小组的归并排序算法
后端·算法·排序算法
Net分享1 分钟前
在 ASP.NET Core 中使用 Confluent.Kafka 实现 Kafka 生产者和消费者
后端
HelloDam2 分钟前
单元格法近似求解多边形最大内接矩形问题【思路讲解+java实现】
后端
Winwoo4 分钟前
服务端推送 SSE
后端
热爱编程的小曾28 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin40 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
uhakadotcom1 小时前
使用 Model Context Protocol (MCP) 构建 GitHub PR 审查服务器
后端·面试·github
Asthenia04121 小时前
详细分析:ConcurrentLinkedQueue
后端