书摘卡片生成器

在社交媒体分享读书心得时，纯文字往往难以吸引注意，而手动设计图片又费时费力。为此，开发者zhifu-tech开发了一款轻量、开源、无需注册的 书摘卡片生成器 —— 帮你5 秒内将一段摘录转化为可直接发布的高清图文卡片。

它不依赖任何后端服务，所有操作在浏览器中完成，支持竖排古籍风与横排现代风，并内置毛笔字体、印章落款、渐变背景等文化元素，让阅读摘录更具美感与仪式感。

核心功能

四要素输入

• 摘录内容：你想分享的原文或感悟（支持多行）
• 书名/出处：如《百年孤独》《论语》或“某播客第37期”
• 作者：马尔克斯、孔子等
• 印章落款：最多 4 个汉字，如“读书”“手札”“慎思”——以红色仿印章形式置于角落

主题与样式

• 10+ 内置主题：纯色（墨黑、米白、靛蓝）、渐变（晨曦、暮霭、青瓷）
• 字体选择：
  • 宋体（经典印刷体）
  • 行书（流畅手写感）
  • 毛笔字体（如“汉仪尚巍手书”，需系统支持）
• 布局切换：
  • 横排：现代排版，适合微博、小红书
  • 竖排：传统书卷风格，适合微信公众号、朋友圈长图

响应式设计

• 桌面端：宽屏预览，精细调整参数
• 手机端：全屏编辑，滑动调节字体大小与卡片宽度
• 所有样式调整实时生效，所见即所得

一键导出高清 PNG

• 基于 html2canvas 技术，将 DOM 渲染为图像
• 输出分辨率适配社交媒体（默认 1080×1920 竖图或 1920×1080 横图）
• 无水印、无压缩，可直接用于发布

使用流程

1. 打开工具页面（本地 HTML 文件或部署网址）
2. 填写摘录内容、书名、作者、印章文字
3. 选择主题、字体、颜色、布局方向
4. 在预览区实时查看效果
5. 点击 “保存” 按钮，下载 PNG 图片

无需登录、不收集数据、不上传内容 —— 一切在本地完成。

技术实现

• 前端架构：纯前端 SPA，无后端依赖
• HTML5：语义化结构（<article>、<footer>）
• CSS3：
  • 使用 CSS 自定义属性（变量）管理主题
  • Flexbox 实现横竖排布局切换
  • 媒体查询适配移动端
• JavaScript (ES6+)：
  • 模块化设计（输入管理、样式控制器、导出模块）
  • 使用 html2canvas 截图生成 PNG
• 开发体验：
  • ESLint + Prettier 保证代码规范
  • JSDoc 提供类型提示与文档生成

适用场景

• 读书博主：快速制作小红书/微博图文卡片
• 学生：整理课堂笔记或名言摘录
• 教师：生成古诗文赏析配图
• 内容运营：为文章配图增添文化氛围
• 个人收藏：将喜欢的句子做成壁纸或屏保