# composition-text-to-img-dy

**Repository Path**: zhangqidaxia/composition-text-to-img-dy

## Basic Information

- **Project Name**: composition-text-to-img-dy
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-04
- **Last Updated**: 2025-06-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📝 作文纸生成器

一个基于 HTML5 Canvas 的在线作文纸生成工具，可以将作文内容转换为标准格式的作文纸图片。

## ✨ 功能特点

### 🎯 核心功能

- **标准作文纸格式**：13 列 ×22 行的标准格子布局
- **学生信息栏**：支持班级、姓名、学号信息录入
- **智能分页**：内容自动分页，横向排列展示
- **高质量输出**：生成清晰的 PNG 格式图片

### 🎨 视觉设计

- **真实格子样式**：行与行之间有间距，左右格子紧密连接
- **标题突出显示**：第一页第一行标题使用粗体
- **信息栏优化**：学生信息仅在第一页显示
- **页码标注**：每页底部显示页码信息

### 📱 用户体验

- **响应式设计**：支持桌面端和移动端访问
- **实时预览**：即时生成作文纸效果
- **一键下载**：支持下载完整的作文纸图片
- **预填示例**：内置示例作文便于快速体验

## 🚀 使用方法

### 1. 打开应用

在浏览器中打开 `index.html` 文件

### 2. 填写信息

- **班级**：输入学生班级信息
- **姓名**：输入学生姓名
- **学号**：输入学生学号
- **标题**：输入作文标题
- **内容**：输入作文正文内容（支持多段落）

### 3. 生成作文纸

点击"🎨 生成作文纸"按钮，系统将自动：

- 处理文本内容
- 进行智能分页
- 生成标准格子布局
- 横向排列多页内容

### 4. 下载图片

点击"📥 下载作文纸图片"按钮保存生成的图片

## 📋 技术规格

### 页面规格

- **画布尺寸**：800×1100 像素（A4 比例）
- **格子规格**：13 列 ×22 行
- **字体**：SimSun（宋体）
- **标题字号**：20px（粗体）
- **正文字号**：18px（正常）

### 布局特点

- **顶部边距**：90 像素（信息栏区域）
- **左右边距**：50 像素
- **行间距**：3 像素
- **底部预留**：70 像素（页码区域）

### 内容处理

- **标题居中**：自动计算居中位置
- **段落缩进**：每段开头自动添加两字符缩进
- **自动换行**：超长行自动换行处理
- **智能分页**：内容超出自动分页

## 🛠️ 技术实现

### 前端技术

- **HTML5**：页面结构和 Canvas 绘图
- **CSS3**：现代化 UI 设计和响应式布局
- **JavaScript**：文本处理和图片生成逻辑

### 核心算法

- **文本分页算法**：智能计算页面容量和内容分布
- **格子绘制算法**：精确绘制标准作文纸格线
- **字符定位算法**：准确定位每个字符在格子中的位置

## 📁 项目结构

```
composition-text-to-img/
├── index.html          # 主页面文件
├── README.md          # 项目说明文档
└── 生成的图片/         # 下载的作文纸图片存放目录
```

## 🎯 使用场景

### 教育场景

- **作文练习**：学生在线练习作文书写
- **作业提交**：生成标准格式的作文图片提交
- **教学展示**：教师展示标准作文格式

### 家庭场景

- **家庭作业**：在家完成作文练习
- **学习辅导**：家长辅导孩子作文书写
- **作品保存**：保存孩子的作文作品

## 🔧 自定义配置

可以通过修改 `PAPER_CONFIG` 对象来调整作文纸参数：

```javascript
const PAPER_CONFIG = {
  width: 800, // 画布宽度
  height: 1100, // 画布高度
  cols: 20, // 横向格子数
  rows: 22, // 竖向行数
  margin: 50, // 边距
  topMargin: 90, // 顶部边距
  fontSize: 18, // 字体大小
  titleFontSize: 20, // 标题字体大小
  // ... 更多配置选项
};
```

## 📝 更新日志

### v1.0.0 (2024-12-19)

- ✅ 实现基础作文纸生成功能
- ✅ 支持学生信息录入
- ✅ 实现标准格子布局
- ✅ 支持多页横向排列
- ✅ 优化字体样式和格子间距
- ✅ 完善页码显示和布局

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来改进这个项目！

### 开发建议

1. 保持代码简洁和注释清晰
2. 测试不同长度的作文内容
3. 确保在不同浏览器中的兼容性
4. 优化移动端显示效果

## 📄 许可证

本项目采用 MIT 许可证，详情请查看 LICENSE 文件。

## 📞 联系方式

如有问题或建议，欢迎通过以下方式联系：

- 提交 GitHub Issue
- 发送邮件反馈

---

**享受使用作文纸生成器，让作文书写更加规范美观！** ✨