一行 URL 动态生成封面图,免费、开源、极简

2 天前
 gnakzz

有时候写文章需要上传封面图,发帖子也需要配个图,大部分情况我只需要简单的文字、LOGO 、强调文字等即可。

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

此 API 可以帮助我快速在任意场景下拿到一张想要的图片。

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

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

https://imgx.zzao.club/api/img/001/001/[Nuxt4]从入门到放弃系列+点击就送屠龙宝刀?bgColor=292a3a-536976&accentColor=0088a9&color=ffffff

开源地址

觉得有用的,欢迎 Star 、PR 。

模板不符合自己用途的,可以联系我开发一个。

技术方面

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

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

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

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

MIT

后续规划

后面的使用继续朝着极简的方向走,通过登录后保存预设,只传递文字就可以拿到自己常用的图片。

再个就是多加几个常用的模板了,比如其他卡片应用的模板,大家有喜欢的欢迎留言,我火速就给复刻出来。

不过,应该没有人喜欢不停的换风格吧🤔

各位觉得如何?

希望大佬们不吝赐教👏

2346 次点击
所在节点    程序员
52 条回复
37Y37
2 天前
不错啊👍
xiaomoxian
1 天前
这才是好软件
wyman222
1 天前
已 star
vfxx
1 天前
已 star ,提个小建议,
1 、能否后期有个简单的 GUI 界面,方便小白输入文字及选取颜色,
2 、是否可以内置几种常见的美学配色组合,对于选颜色选取困难、不懂美学的人上手就能用,且选的还很好看
(跟你的后续规划基本一致,更具体了些)
gnakzz
1 天前
@vfxx 有的,https://imgx.zzao.club ,就是 UI 界面,现在还不如 api 完善。感谢建议😊
gnakzz
1 天前
@wyman222 感谢🙏
TimPeake
1 天前
有点意思。图可以参考下小红书的那种文字生图
JimLee0921
1 天前
哈哈,我写博客都是让 AI 帮我生成一张 cover
qianyan
1 天前
好东西,已 star
xingheng
1 天前
怎么部署到 vercel ,或者如何让能生成的链接永久有效
ncbdwss
1 天前
好东西。最近正好需要一个。
gnakzz
1 天前
@TimPeake 嗯嗯,第一个模板支持的是公众号封面配图。下一个就是找个小红书的图复刻一下了
gnakzz
1 天前
@JimLee0921 免费的 AI 生成的效果太感人了,让他给我生成图片的功夫,半篇文章都快写完了。
gnakzz
1 天前
@xingheng 部署到 vercel 应该不是问题。后续支持

链接永久有效需要上传到自己的对象存储,或者下载下来。

我的使用场景下,图片风格不变,内容常变,所以存在自己本地一堆这东西也没啥用。配这个图最终是要发到某个平台上的,平台肯定会转存这个图片。

当然,我服务器还在的话,是会一直有效的。
zgsi
1 天前
哇,终于刷到这个了。十几年前 QQ 流行的时候,那时候有一些头像之类的,记得就是改下 URL 里的参数图片里的文字就会跟着变。后来搞 it 后一直好奇怎么实现的。
gnakzz
1 天前
@zgsi 原理很简单,应该都是差不多的,不过我这个开销低一些。在 node 端用 canvas 或者无头浏览器的就不适合我的小服务器😛
luckybigbear
1 天前
这功能看着真不错!就是好奇登录保存预设具体咋弄,之后加模板大概得等多久?
gnakzz
1 天前
@luckybigbear 登录保存预设其实优先级比较低了,一登录就不方便了。

加模版的话,不如你现在就发我个图吧,发出来今天就加上
housex
1 天前
不用开发和部署哈,EdgeOne Image Renderer 可以了解下,他们提供免费的应用,可以自己写 html 模板,直接帮你生成,支持 API 调用生成和 URL 分发。完全不用自己折腾了

https://edgeone.cloud.tencent.com/image-renderer
gnakzz
1 天前
@luckybigbear 我的构思是:会先出一个入口,可以提交自己的预设,生成一个预设码。然后带着预设码直接发送文字

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/1110730

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX