cover-generator · 封面工坊

为 xsfly 博客生成统一风格封面图的本地工具：渐变底 + 标题分缝 + 圆形 Logo，一键导出自包含 SVG/PNG，单文件双击即用。

预览即导出物——预览与导出共用同一个 SVG 生成函数，所见即所得。

功能特性

• 封面生成：1200×630（社交分享卡标准尺寸）渐变底 + 标题左右分缝 + 中央圆形 Logo，实时预览、等比缩放
• 标题：左右分框独立输入、字号 100–210px 手动可调、超长自动缩小兜底；可选副标题
• 渐变：24 套精选预设（精选自 pxlab.cn）、自定义起止色与角度、粘贴 CSS linear-gradient 直接应用
• 封面质感：渐变高光与暗角、噪点去色带、副标题字距排版与装饰线、右下角域名水印、Logo 双层柔影
• Logo：本地上传 / 图床直链导入（跨域失败自动经 wsrv.nl 公共代理兜底）、隐藏后标题合并居中、恢复默认
• 导出：SVG 文字经 opentype 转矢量路径，零字体依赖、Base64 内嵌自包含；PNG 位图
• 状态持久化：localStorage 自动保存，刷新或重开不丢

使用

开发

npm install
npm run dev

构建单文件成品

npm run build   # 产出 dist/index.html，双击即用，无需安装

Logo 链接导入

图床直链优先直连；图床不允许跨域（CORS）时自动经 wsrv.nl 公共图片代理兜底，无需任何本地进程。

技术栈

Vue 3.5 · TypeScript 5 · Vite 7 · opentype.js 1.3 · Vitest 3 · vite-plugin-singlefile

许可证

MIT