毛怪俱乐部分享卡片

这是一个分享卡片的项目,通过输入毛吧的帖子链接,可以生成分享用的长图。使用了dom-to-image第三方库,并利用next.js的api解决了跨域问题。源代码可以在GitHub上找到。
毛怪俱乐部分享卡片
notion image
 

介绍

输入毛吧的帖子链接,输出分享长图。
input mgclub post url, output the long pic to share.
体验地址:

开发意图

因为毛吧的链接在例如qq这样的社交软件上是被屏蔽无法打开的,所以想着说想和朋友分享内容的话可以直接生成长图。

原理

使用的dom-to-image这个第三方库。
dom-to-image
tsayen • Updated Aug 17, 2025
由于dom-to-image本身未对跨域问题做处理,因此利用了nextjs的api,把图片在服务端下载转成base64,最后使用dom-to-image转成长图。
也趁此机会阅读了这个库的完整代码,学到了很多东西。目前还在整理笔记中。

源代码

hanser-club-share-card-web
KazooTTT • Updated Aug 27, 2024
上一篇
设计参考篇
下一篇
图标库篇