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

相关推荐
咕白m6251 分钟前
使用 C# 设置 Word 段落对齐样式
后端·c#
知其然亦知其所以然3 分钟前
JavaScript 变量的江湖恩怨:一篇文章彻底讲清楚
前端·javascript·面试
Kiri霧3 分钟前
Go切片详解
开发语言·后端·golang
小番茄夫斯基5 分钟前
使用 pnpm + Workspaces 构建 Monorepo 的完整指南
前端·javascript·vue.js
翔云 OCR API5 分钟前
API让文档信息“活”起来:通用文档识别接口-开发者文字识别API
前端·数据库·人工智能·mysql·ocr
cypking6 分钟前
Web常见安全漏洞全解析(含案例+前后端实操防御方案)
前端
shuaijie05188 分钟前
两个表格进行相互联动
前端·javascript·vue.js
JS_GGbond10 分钟前
让代码学会“等外卖”:JavaScript异步编程趣谈
前端·javascript
一点晖光11 分钟前
小程序中web-view加载uni-app H5如何使用postMessage方法的解决方案
前端·小程序·uni-app
AI分享猿13 分钟前
雷池 WAF vs React 高危漏洞:1 毫秒检测延迟,护住全栈业务安全
前端·安全·react.js