【开源】Coverly，让封面创作更简单

写在前面

最近在写博客的时候，又一次被“给文章做封面”这件小事卡住了。

想要一张风格统一、标题清楚、看起来还不错的封面，往往得先打开设计软件，再调背景、调颜色、排文字。偶尔写一篇文章还好，文章一多，就会觉得这一步有点麻烦。即使是做了 PSD 模板，光是打开 Photoshop 也要浪费半天时间。

所以我（和 AI）做了一个小工具：Coverly。

它是一个可以直接在浏览器里制作横向封面的轻量编辑器。不需要登录，也不需要后端；打开网页，选一个模板，改改文字和素材，就可以导出一张封面图。

Coverly 是什么？

简单来说，Coverly 是一个专门给博客文章、活动页面或者社交媒体做封面的在线小工具。

一开始只是想解决我自己做博客封面的需求：不要太复杂，但也不能只能改一行字。于是它慢慢有了渐变背景、图片背景、液态玻璃编辑、文字编辑这些功能，也可以把每次调出来的配色保存下来，之后继续用。

整个编辑过程都在浏览器本地完成，项目数据默认保存在本地存储里。对于只是想快速出图的人来说，打开就能用，不用先注册一个账号，这点我自己还是挺喜欢的。

可以做什么？

目前 Coverly 已经有了下面这些功能：

• 内置多组渐变模板，也可以保存自己的配色模板
• 可以上传背景图和素材图，并调整裁切、缩放、位置、模糊、亮度、饱和度等参数
• 标题文字可以直接在画布上编辑，字体、字距、透明度和玻璃质感也都能调整
• 主素材支持拖拽、缩放和旋转，还有吸附参考线、撤销与重做
• 支持上传自定义字体，也可以通过图标库搜索图标
• 项目会自动保存到本地，支持归档、导入、导出项目 JSON
• 可以导出 PNG、JPG、WebP、PDF、PSD，以及 Coverly 项目文件
• 桌面端和移动端都可以用，也做了浅色 / 深色外观

有时候只是想做一张简单的封面，选个渐变、填上标题就够了；如果想再折腾一点，也可以加一张背景图，放上素材，再慢慢调出自己喜欢的感觉。

一些我觉得比较有意思的地方

本地保存，不用担心做到一半丢掉

Coverly 会自动把项目保存在当前浏览器里。下次再打开时，之前没做完的封面还在，可以继续修改。

当然，本地存储也意味着清除浏览器站点数据后内容会消失。所以如果有比较重要的作品，记得导出一份项目 JSON 备份一下。之后需要继续改的时候，再导入回来就行。

不只是导出图片

除了常见的 PNG、JPG、WebP，Coverly 还支持导出 PDF 和 PSD。

做完之后想直接发博客或者发社交平台，导出图片就行；如果还想留一份可以继续在其他软件里编辑的文件，也多了一个选择。

手机上也能临时改一改

很多时候灵感并不在电脑前。Coverly 也针对移动端做了适配，虽然精细排版还是更推荐在电脑上完成，但临时改个标题、换个颜色、导出一张图，手机上也能完成。

技术上用了什么？

Coverly 使用 Next.js、React 和 TypeScript 开发，界面部分用了 Tailwind CSS、Radix UI 以及 shadcn/ui。

画布渲染主要基于 Canvas 2D；导出 PDF 用了 jsPDF，导出 PSD 用了 ag-psd。图标搜索则接入了 Iconify。

试试看

Coverly 已经开源在 GitHub：

Mystic-Stars/Coverly

如果你也经常需要给文章做封面，欢迎下载下来试一试；觉得哪里不好用、有什么想加的功能，也欢迎提 Issue 或者 PR。

项目本地运行也很简单：

git clone https://github.com/Mystic-Stars/Coverly.git
cd Coverly
npm install
npm run dev

然后打开 http://localhost:3000 就可以开始做图了。

最后

Coverly 目前还是一个刚起步的小项目，很多细节肯定还可以继续完善。不过能把自己平时重复做的事情，慢慢变成一个顺手的小工具，本身就是一件挺开心的事。

希望它之后能帮我少花一点时间在“这张封面到底怎么做”上，多花一点时间去写真正想写的内容。

如果它也刚好能帮到你，那就更好啦 ✨