关联内部链接:
- [[速通-unjs 家族的 Web 框架 Nitro]]
- [[速通-腾讯云云函数 scf]]
- [[编写一个小工具方便快速为文章添加 Banner]]
- [[速通-动态 SVG 图片生成方案 Satori]]
背景
现在比较习惯在文章顶部增加一张包含当前标题的图片,在不同平台会默认第一张图片有用,比如认为这是文章 Banner,Cover, Hero Image 等说法。
之前在 [[编写一个小工具方便快速为文章添加 Banner]] 文章中就提到了我写了一个网站,可以在页面上操作生成 banner。
那有没有一种办法直接写一个服务,当我访问 xx.com/cover?title=xxx
时候自动返回一张图片,这样的话,我就不需要打开页面去创建了。后续我只需要查看日志就知道有多少人访问过啦!
而且不同于浏览器,在 node.js 里渲染图片要更复杂一点,不可以像浏览器那样把计算、渲染的能力丢给浏览器了,最直接的就是 html+css 生成截图不可以了,因为 node 环境里没有 css 渲染的能力,得靠 puppeteer 那一套,得使用 canvas/svg 等方案来画。
Canvas 的跨平台兼容就显现出来了。但 Canvas 没接触过不太会,得现学。后来发现 svg 也非常简单,而且返回的是字符串,体积更小。
鱼和熊掌不可兼得啊。
需求设计
首先这是一个 node 服务,我们携带参数请求接口,返回的是一张图片。这就需要我们部署后端。
相通的请求参数应该出现一致的结果,主要是背景图,不要一刷新页面里的图片变了,产生不必要的误会。
后续可以增加不同的模板,展望可以做成服务对外提供。
参数我们希望:
- width 宽度
- height 可选,自动高度
- 比例 4:3 16:9 21:9 2:1 1:1 等
- title 文字内容
- source 角标,比如
@ijust.cc
- 指定色相 0-360
- 默认开启渐变 linear-gradient
这样基本就和网页版 https://ijust.cc/tools/canvas 一致了。
技术设计
交付托管
node 服务托管,显然是可以使用 serverless,我们可以选择国内的云厂商服务,也可以使用 cloudflare/vercel 提供的服务。考虑服务为了正常需要迁移,可以选择 serverless 框架,之前提到过的 [[速通-unjs 家族的 Web 框架 Nitro]] 就可以拍上用场了。Nitro 可以很容易构建出不同的产物。
云厂商这里我们使用腾讯云 Serverless 函数,后面补充 Cloudflare Workers。
主题色持久化
相通的内容产生相通的结果,设计一个方案,根据 title 内容算出一个数字,表达主色调。问了 GPT 给了几个方案,比如每个字符串去算 charCodeAt ,得到的数字进行处理。
function stringToDegrees(inputString) {
let hash = 0;
for (let i = 0; i < inputString.length; i++) {
let char = inputString.charCodeAt(i);
hash = ((hash << 5) - hash) + char;
hash |= 0; // 将哈希值转换为32位整数
}
return Math.abs(hash % 360);
}
stringToDegrees('中文') // 194
使用 Satori 制作动态 SVG
画布因为考虑 Canvas,很多东西就不能复用了,经过实践发现 Vercel 的 Satori最近比较火热,在 [[12-速通 syntax.fm 659 OG Image]] 这一期其实也提到过。写 demo 成功了,以后能经常用得上。
这么一张 SVG 图,才 4.5k 大小,要是 jpg 和 png 都不敢想。至少大 10 倍、20 倍。
技术实现
这里我们准备一个新仓库用来解释这一切,后续也可以作为分享内容。
代码在这里 https://github.com/Otto-J/serverless-dynamic-banner
我先去写代码了,写完代码回来补充。
经过一些时间后,终于写完了,serverless 服务也上线可用了。大量吐槽来了,气人 😡。
踩坑经验
之前讲到本次技术选择是:nitro+腾讯云 serverless,目标是上线 serverless 服务,最终我们手里有一个网址,一打开是一张图片。
Nitro 文档稀烂
我选择 nitro 有两个原因:
- 不用我学习新语法,比如 next.js 的那些概念,轻松上手,比 express/koa 相比不是玩具,大量内置了 ts、路由、中间件、常用方法,更快更容易写出真实业务代码
- Nitro 是 nuxt 的组成部分,学会了 nitro 一鱼两吃,写后端服务、写全栈服务都可以用得上,经验直接复用
问题来了,如果我想获取路由的信息,设置返回的信息等技术细节,我应该怎么学会呢?问 GPT,GPT 不知道这么新的东西。只能看文档和教程。
Nitro 文档就几页,没中文,功能介绍跟 ppt 似的,也没有 playground,看的眼睛都花了,也没找到 api 索引。生气,guide+api 索引+playground+项目实战不应该标配嘛!
不过我是高手,好在我知道 Nitro( [[速通-unjs 家族的 Web 框架 Nitro]]) 是 unjs/h3 ([[unjs家族里的 http 框架 h3]]) 的封装,h3 提供低级 api,nitro 提供高级封装开箱即用。所以我应该去看 h3 的文档,聪明如我。
github 搜索 unjs h3,打开 https://github.com/unjs/h3 结果…
算了,告诉你吧,api 索引在这里,在 h3 长长文档的最下方。
如何设定返回值时候,指定 content-type 为 svg?自己试。结论是使用 send
方法。
对了,如果你是 Nuxt 用户,那么你需要按照这个路线学习 Nuxt 文档 - Nitro 文档 - h3 文档。
腾讯 Serverless 函数体验贼差
之前文档也提到过 ([[速通-腾讯云云函数 scf]]),作为国内大厂,值得信赖,而且做了也不是一年两年了。
结果体验贼差,我以为的云函数上线过程:
- 授权 github 信息,读取项目
- 选择项目源码,自动或者手动选择基本信息,帮我做好构建
- 拿到交付产物,上传到云端
- 给我一个地址,我一点击就访问通了
- 告诉我你可以自定义网址,为了安全和推广其他服务,建议你开通网关鉴权、监控、日志之类的
- 用吧,额度不够可以买套餐
挺合理的,服务好用户,也能带一带其他商业服务。
实际上不是,每一步都有大量的错误,大量的延伸技术概念,大量的问号帮助文档。生怕我觉得前端上线个服务挺简单,没有技术难度。
无力吐槽,算了,不写了,好在走过来了。
后面单独开个文档介绍吧。
DNSPOD 扭扭捏捏不融入腾讯云
DNSPOD 被腾讯云收购了,现在属于腾讯云。即便我域名、备案、解析都在腾讯云和 DNSPOD,我开通 DNS 解析,还是要重复开页面、登录、扫码、编写。
麻烦死了。
自己愚蠢文件放错了位置
这个看我源码就知道,为了目录好看,我包了一层,结果脑抽忘了,一些文件放外层了,怎么都拿不到,嘿嘿,后面不同项目开不同的窗口,乱了就不好了。
satori 不支持 css 和图片的特性
因为 svg 技术限制,satori 不支持 z-index,不支持 transfrom,必须全程使用 flex 布局,字体必须指定,不支持 webp/avif 等图片格式,不支持 hsl 颜色格式。
怎么说呢,好在东西不复杂,样式改改也就能用了。
我 banner 不是有一个小人头像么,svg 是要通过 base64 内嵌进去的,体积会变大。为了减少图片体积,我尝试转 svg,转 avif/webp 等格式,都不是很满意。
最后用的 png 颜色减少,感觉 24 色就足够了,轻松让 png 缩小了五六倍,肉眼看不出差异,挺好的。
总结展望
东西做完了,感受如何,昨天都气疯了,今天算写完了。
下次还来,希望轻车熟路,能快一点。
做国内的云服务虽然有价格战,但还是有位置的,业务还是要专注、做好。服务使用流畅应该是标配的。