English | 中文

手写文字生成 ✍️

🚀 立即使用 → — 无需安装，浏览器直接运行！

基于 Canvas API 的纯前端手写文字生成工具。在浏览器中生成逼真的手写文字图片和 PDF，无需后端服务器。

✨ 功能

• 🎨 自定义字体 — 上传你的 TTF/OTF 字体文件，生成独特的手写风格
• 🖼️ 背景图片 — 支持自定义背景图片，或自动生成横线笔记本背景
• 🎛️ 丰富的参数 — 控制字间距、行间距、边距、笔画偏移、旋转扰动、墨汁深度等
• ✏️ 涂改痕迹 — 模拟真实手写的涂改/删除线效果
• 📄 多格式导出 — 支持 PNG 预览、ZIP 批量下载、PDF 一键导出
• 📱 PWA 支持 — 可安装到桌面，离线使用
• 🌐 纯前端 — 所有运算在浏览器完成，保护隐私，无需后端

🚀 快速开始

在线使用

访问 is-cau.github.io/handwriting-web 即可使用。

本地运行

git clone https://github.com/is-cau/handwriting-web.git
cd handwriting-web/frontend
npm install
npm run serve

打开 http://localhost:8080

构建部署

npm run build
# 产出在 frontend/dist/ 目录，可部署到任意静态服务器

🎨 设计

本项目采用中国风/书法主题设计：

• 墨色 (#2C1810) + 宣纸色 (#F5F0E8) + 朱砂红 (#C41E3A)
• Noto Serif SC 宋体标题 + KaiTi 楷体正文
• 宣纸纹理背景

📝 使用说明

1. 在左侧文本框中输入或粘贴文字（也支持上传 .txt 文件）
2. 选择系统字体或上传自己的手写字体 (.ttf)
3. 调整各项参数（字体大小、行间距、边距、扰动等）
4. 点击预览查看效果
5. 满意后点击生成完整图片（下载 ZIP）或生成 PDF

🛠️ 技术栈

• Vue 3 + Vue Router + Vuex + Vue I18n
• Bootstrap 5 + Chinese Calligraphy Theme
• Canvas API — 文字布局与手写渲染
• jsPDF — PDF 导出
• JSZip — ZIP 打包

手写引擎

核心手写生成引擎位于 frontend/src/engine/，基于 handright (Python) 的设计思想，使用 Canvas API 在浏览器端实现：

• 逐字渲染，每个字独立扰动
• 位置、旋转、大小、墨色的随机变化
• 支持删除线/涂改痕迹模拟
• 自动分页与排版

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📜 许可

本项目代码基于 MIT License 开源。

本项目设计思想来源于 handright（MIT License）。

字体文件的许可可能不同，请查阅各自的许可条款。本仓库不包含商业字体文件。

💝 赞助

如果这个项目对你有帮助，欢迎通过支付宝赞助支持：