一行 URL 动态生成封面图,免费、开源、极简 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
gnakzz
V2EX    程序员

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

  •  1
     
  •   gnakzz 245 天前 3632 次点击
    这是一个创建于 245 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有时候写文章需要上传封面图,发帖子也需要配个图,大部分情况我只需要简单的文字、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

    后续规划

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

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

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

    各位觉得如何?

    希望大佬们不吝赐教

    第 1 条附言    244 天前
    2025-02-12 v0.2.0 更新:

    - 支持导出 2 倍图了
    - 前端界面完善
    - 是否高清
    - 是否全部居中
    - 预制的 10 个径向渐变色
    - 显示 api 的参数
    第 2 条附言    243 天前
    前端界面大优化! https://imgx.zzao.club
    - 随机渐变色:同色系渐变、互补色渐变、相邻色渐变。根本没有丑的
    - 文字颜色随机:自动跟随背景色设置偏白或偏黑;支持指定黑、白、随机色
    - 强调色随机:随机
    - 增加了 Tips:对于当前界面的使用说明
    第 3 条附言    238 天前
    v0.5.0

    重构了核心代码。

    已经支持每行文字不同字号、不同颜色、不同强调色。

    v0.6.0 着重于把所有参数保存为预设码。携带预设码快速生成图片~

    保存需登录,使用无需登录。
    52 条回复    2025-02-13 13:37:03 +08:00
    yellowsky
        1
    yellowsky  
       245 天前   1
    不错,感谢
    gnakzz
        2
    gnakzz  
    OP
       245 天前
    @yellowsky 客气啦,有需求可以提出来
    a941097
        3
    a941097  
       245 天前
    很棒,已 star
    x86
        4
    x86  
       245 天前
    不错,之前一直用工具站的展位图做测试,太单调了
    kklt1024
        5
    kklt1024  
       245 天前
    这个开源地址,找了半天 o()o
    gnakzz
        6
    gnakzz  
    OP
       245 天前
    @kklt1024 为何,不是能直接点击嘛
    gnakzz
        7
    gnakzz  
    OP
       245 天前
    @a941097 感谢
    gnakzz
        8
    gnakzz  
    OP
       245 天前
    @x86 欢迎提需求,加班给你开发
    td width="10" valign="top">
    wogogoing
        9
    wogogoing  
    PRO
       245 天前 via iPhone
    这个很实用啊!需要配合图床使用的朋友可以看下我的星光图床 https://stardots.io
    zoharSoul
        10
    zoharSoul  
       245 天前
    可以生成小说封面图吗?
    ltaoo1o
        11
    ltaoo1o  
       245 天前
    很实用,不过如果标题包含特殊字符如 "" 似乎会有问题,另外 +、[] 这些有转义写法吗,就是标题就是 + 这个符号。
    gnakzz
        12
    gnakzz  
    OP
       245 天前
    @ltaoo1o 还没有完善,现在是一个基础用法,特殊字符没处理
    gnakzz
        13
    gnakzz  
    OP
       245 天前
    @zoharSoul 什么小说封面图,有案例图吗?
    XMV2e4PmK5F85h17
        14
    XMV2e4PmK5F85h17  
       245 天前
    很好 提个小建议 就是生成的图片分辨率有点低了 希望能设置分辨率
    zoharSoul
        15
    zoharSoul  
       245 天前
    @gnakzz #13 起点/晋江/飞卢 等等
    littlewing
        16
    littlewing  
       245 天前
    有个疑问,图片是在服务器上生成的吗,是每次都重新生成吗?那如果访问量大了是不是速度会慢,而且占用服务器带宽会很大吧
    wen20
        17
    wen20  
       245 天前   1
    很实用
    blue2008
        18
    blue2008  
       245 天前   1
    东西不错
    gnakzz
        19
    gnakzz  
    OP
       245 天前 via Android
    @Sniper000 明白,今天故意调小了,看看服务器负载如何,明天上线 2 倍图和 3 倍图
    gnakzz
        20
    gnakzz  
    OP
       245 天前 via Android
    @littlewing 文字一样就会用缓存,不一样就会重新生成。

    现在一张图才几十 kb , 流量情况明天我看看再来回复你。

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

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

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

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

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

    https://edgeone.cloud.tencent.com/image-renderer
    gnakzz
        40
    gnakzz  
    OP
       244 天前
    @luckybigbear 我的构思是:会先出一个入口,可以提交自己的预设,生成一个预设码。然后带着预设码直接发送文字
    gnakzz
        41
    gnakzz  
    OP
       244 天前
    @housex 面对使用者来说,登录后台都算是门槛了,更不要说写 html 和 api 调用。哪有别人写好了直接用方便?

    面对我这种开发者来说,我分分钟都解决了自己的需求,还用他这个干嘛 ,如果失效或收费了他对我负责吗。
    housex
        42
    housex  
       244 天前
    1. 作为使用者才应该是拿来即用,而不是要花时间先去理解你这个项目,再去想办法部署到 pages 或静态网站托管。使用者不一定有这样的开发能力。
    2. 如果你说写 html 门槛也高,那你的这个应用可能不会有真正的使用者,因为模板少就是致命的缺点了。
    3. 使用者大多可能是设计行业的人,对字体种类要求较高,你这个应用还不够全,能实现的图片样式比较局限。
    4. 你的应用生成的 get 链接并没有保护机制,缺少合规检查,随便改下文案就可以让别人访问,如果是涉黄、涉暴等不合规的文字或图片,域名极有可能被封掉。
    gnakzz
        43
    gnakzz  
    OP
       244 天前
    @housex #42 我看你的描述 123 ,你适合去卡片 app 里选模板写文字再下载。既有你要的字体,模板也多。

    我这个服务就是为了脱离开 App 才有的。你先看帖子第一句话再来评论。

    或者你不用不就完了吗,我又没逼你用,只是分享给有需要的人,而且是 MIT 开源的,你为什么会操这么多心呢
    zhw2590582
        44
    zhw2590582  
       244 天前
    不错,可以整一个生成界面,添加更多可调参数
    musi
        45
    musi  
       244 天前
    能生成动态背景的 gif 图或者 live 图吗?
    小红书上现在 live 图的使用还是蛮多的
    gnakzz
        46
    gnakzz  
    OP
       244 天前
    @musi LIVE 听起来不太可能
    zhwithsweet
        47
    zhwithsweet  
       244 天前   1
    之前做 og 尝试过
    gnakzz
        48
    gnakzz  
    OP
       244 天前
    @zhw2590582 https://imgx.zzao.club 欢迎访问,和 api 是一个地址~
    xshell
        49
    xshell  
       244 天前   1
    dx10076900424
        50
    dx10076900424  
       243 天前
    喜欢这个创意,这是什么字体
    gnakzz
        51
    gnakzz  
    OP
       243 天前
    @dx10076900424 YouSheBiaoTiHei
    gnakzz
        52
    gnakzz  
    OP
       243 天前
    @zoharSoul #15 感觉需要一些设计才行,一般不都是书名+作者+一个和小说相关的炫酷背景。背景可能需要自己提供,书名+作者这个可以支持
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     927 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 28ms UTC 20:52 PVG 04:52 LAX 13:52 JFK 16:52
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86