# cl-custom-seal

**Repository Path**: CodeLife_fjl/cl-custom-seal

## Basic Information

- **Project Name**: cl-custom-seal
- **Description**: 自定义生成印章,可以自定义印章颜色,内容,字体,角度,做旧等效果
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-28
- **Last Updated**: 2026-01-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 印章生成器使用文档

## 📌 项目简介

这是一个功能强大的在线印章生成工具，支持自定义设计各种样式的印章，并提供专业的做旧效果。适用于制作公司印章、个人签章等多种场景。

## 🚀 快速开始

1. 直接在浏览器中打开 `index.html` 文件
2. 左侧控制面板调整印章参数
3. 右侧实时预览印章效果
4. 点击"下载图片"保存印章

## ✨ 核心功能

### 1. 基础设置

控制印章的主要文字和基本样式参数。

| 参数 | 说明 | 默认值 |
|------|------|--------|
| **印章文字** | 显示在印章上的主要文字内容 | "什么什么有限公司" |
| **字体大小** | 主文字的大小（像素） | 48 |
| **文字半径** | 文字排列的圆形半径 | 120 |
| **字体粗细** | 文字的粗细程度（正常/加粗等） | 加粗 |
| **字体类型** | 支持多种中文字体（宋体、黑体、楷体等） | 宋体 |
| **文字颜色** | 文字的颜色（支持色板选择） | #ff0000（红色） |
| **起始角度** | 文字排列的起始角度（度） | 170 |
| **结束角度** | 文字排列的结束角度（度） | 360 |

**使用技巧：**
- 起始角度和结束角度决定文字的排列范围，通常设置为半圆或完整圆形
- 文字半径影响印章的整体大小，建议根据文字数量调整

### 2. 中心图案

设置印章中心的装饰性图案。

| 参数 | 说明 | 默认值 |
|------|------|--------|
| **中心图案** | 中心显示的字符或符号 | ★ |
| **图案大小** | 中心图案的大小（像素） | 130 |

**常用图案示例：**
- `★` - 五角星
- `●` - 实心圆
- `◆` - 菱形
- `✓` - 对勾
- 也可以输入任意中文字符（如"印"、"章"）

### 3. 外圈设置

控制印章外围的圆形边框。

| 参数 | 说明 | 默认值 |
|------|------|--------|
| **圆线宽度** | 外圈圆形边框的线条宽度 | 10 |
| **圆线颜色** | 外圈圆形边框的颜色 | #ff0000（红色） |

### 4. 下方弧形小字

在印章下方添加弧形排列的辅助文字（如编号、日期等）。

| 参数 | 说明 | 默认值 |
|------|------|--------|
| **启用下方弧形小字** | 开关控制是否显示 | 已启用 |
| **小字内容** | 下方弧形显示的文字 | "123456789" |

**使用场景：**
- 公司注册号
- 印章编号
- 日期标记

### 5. 水平文字

在印章中部添加水平排列的文字。

| 参数 | 说明 | 默认值 |
|------|------|--------|
| **启用水平文字** | 开关控制是否显示 | 未启用 |
| **水平文字内容** | 水平显示的文字内容 | "水平文字" |
| **文字大小** | 水平文字的大小 | 24 |
| **文字位置** | 文字相对中心的垂直偏移量 | 100 |
| **字间距** | 字与字之间的间距 | 1 |
| **字体粗细** | 水平文字的粗细 | 加粗 |
| **字体类型** | 水平文字的字体 | 宋体 |

**使用场景：**
- 部门名称
- 特殊标识
- 二级标题

**字间距说明：**
- 设置为 `0` 时，文字会自动均匀分布
- 设置为正值时，按照指定像素值调整间距

## 🎨 做旧效果

提供四种专业的印章做旧效果，让印章看起来更加真实自然。

### 效果按钮

| 按钮 | 效果说明 |
|------|----------|
| **做旧** | 添加破损、噪点、裂痕和颜色淡化效果，模拟长期使用的印章 |
| **遮盖** | 添加不规则的淡化区域，模拟印油不均匀的效果 |
| **拖影** | 添加轻微的拖影效果，模拟盖章时的移动和压力不均 |
| **一键做旧** | 自动应用多种效果的组合，快速生成逼真的旧印章 |

**做旧效果详解：**

1. **做旧效果**包含：
   - 破损遮罩：随机生成 20-35 个不规则破损点
   - 噪点：添加细微的像素噪声
   - 裂痕：生成 5-10 条自然的裂纹线条
   - 颜色淡化：随机淡化印章颜色，增加真实感

2. **遮盖效果**：
   - 生成 4-10 个不规则多边形遮盖区域
   - 半透明白色覆盖，模拟印油干涸或不均匀

3. **拖影效果**：
   - 将印章分为 20×20 像素的网格区域
   - 对每个区域应用随机方向的位移（最多 6 像素）
   - 创造 4 层半透明拖影，模拟盖章时的移动和重影
   - 35% 的区域会额外添加轻微的旋转和缩放扭曲
   - 效果模拟：盖章时手部的轻微晃动、印油的不均匀附着

4. **一键做旧**：
   - 自动执行：做旧 × 2 + 遮盖 × 1 + 拖影 × 2
   - 效果叠加，生成高度逼真的旧印章

**使用建议：**
- 可以多次点击同一效果，叠加增强
- 如果效果过重，点击"重新生成"恢复原始状态
- 推荐先调整好印章参数，最后再应用做旧效果

## 💾 配置管理

### 导出配置

1. 点击"导出配置"按钮
2. 系统自动生成当前印章的所有参数（JSON 格式）
3. 点击"复制"按钮将配置复制到剪贴板
4. 保存配置文件以便后续使用

### 导入配置

1. 点击"导入配置"按钮
2. 粘贴之前导出的配置 JSON 数据
3. 点击"导入"按钮
4. 印章自动应用导入的配置

**配置文件示例：**

```json
{
  "sealText": "什么什么有限公司",
  "smallText": "123456789",
  "horizontalText": "水平文字",
  "fontSize": 48,
  "fontWeight": "bold",
  "fontFamily": "SimSun",
  "fontColor": "#ff0000",
  "textRadius": 120,
  "startDeg": 170,
  "endDeg": 360,
  "centerChar": "★",
  "starSize": 130,
  "circleWidth": 10,
  "circleColor": "#ff0000",
  "enableSmallText": true,
  "enableHorizontalText": false
}
```

## 📱 移动端支持

本工具完全支持移动端设备，针对手机和平板进行了优化：

### 响应式特性

- **自适应布局**：根据屏幕尺寸自动调整界面布局
- **触摸优化**：所有按钮和控件都适配触摸操作
- **画布自适应**：印章预览区域自动适配屏幕宽度
- **默认折叠**：移动端默认折叠部分卡片，保持界面简洁

### 移动端使用技巧

1. **旋转屏幕**：横屏模式下可以看到更多内容
2. **卡片折叠**：点击卡片标题可以展开/折叠设置项
3. **精确输入**：输入框字体大小已优化，防止 iOS 自动缩放
4. **触摸反馈**：按钮按下时有视觉反馈

## 🎯 常见使用场景

### 1. 企业公章

```
印章文字：公司全称
中心图案：★
下方小字：公司编号或注册号
启用水平文字：否
```

### 2. 合同专用章

```
印章文字：公司名称
中心图案：●
下方小字：合同专用章
启用水平文字：否
```

### 3. 部门印章

```
印章文字：公司名称（弧形）
中心图案：★
启用水平文字：是
水平文字内容：部门名称
```

### 4. 个人签章

```
印章文字：姓名
中心图案：印 或 章
下方小字：禁用
字体类型：楷体或行书
```

## ⚙️ 技术特性

- **纯前端实现**：无需服务器，所有处理在浏览器本地完成
- **实时预览**：所有参数修改立即生效（100ms 防抖）
- **高清输出**：400×400 像素高清画布
- **跨平台兼容**：支持 Windows、macOS、iOS、Android
- **零依赖**：纯 HTML + CSS + JavaScript，无需额外库

## 📝 操作流程

### 基本流程

```
1. 输入印章文字
   ↓
2. 调整字体样式和大小
   ↓
3. 设置中心图案
   ↓
4. 配置外圈样式
   ↓
5. 添加辅助文字（可选）
   ↓
6. 实时预览效果
   ↓
7. 应用做旧效果（可选）
   ↓
8. 下载印章图片
```

### 高级流程

```
1. 导入已保存的配置
   ↓
2. 微调参数
   ↓
3. 应用特效
   ↓
4. 导出新配置
   ↓
5. 下载图片
```

## 🔧 常见问题

### Q1: 印章文字显示不完整？

**A:** 调整以下参数：
- 减小"字体大小"
- 增大"文字半径"
- 调整"起始角度"和"结束角度"

### Q2: 做旧效果太重或太轻？

**A:** 
- 效果太重：点击"重新生成"恢复原始状态
- 效果太轻：多次点击同一效果按钮叠加

### Q3: 水平文字位置不合适？

**A:** 调整"文字位置"参数：
- 正值：文字向下移动
- 负值：文字向上移动
- 配合"字间距"精确控制文字排列

### Q4: 字体显示不正确？

**A:** 
- 系统需要安装对应的字体
- Windows 系统推荐：宋体、黑体、楷体、微软雅黑
- macOS 系统推荐：苹方、华文字体系列

### Q5: 移动端操作不流畅？

**A:** 
- 使用现代浏览器（Chrome、Safari、Edge）
- 清除浏览器缓存
- 关闭其他占用资源的应用

## 📄 浏览器兼容性

| 浏览器 | 版本要求 | 支持状态 |
|--------|----------|----------|
| Chrome | 60+ | ✅ 完全支持 |
| Firefox | 55+ | ✅ 完全支持 |
| Safari | 11+ | ✅ 完全支持 |
| Edge | 79+ | ✅ 完全支持 |
| IE | 不支持 | ❌ 不支持 |

## 🎨 设计建议

### 配色方案

- **传统印章**：红色文字 + 红色边框（#ff0000）
- **青色印章**：蓝色系（#0066cc）
- **黑色印章**：纯黑或深灰（#000000, #333333）

### 字体选择

- **正式场合**：宋体、楷体
- **现代风格**：微软雅黑、苹方
- **艺术风格**：行书、草书

### 尺寸建议

- **标准企业章**：文字半径 120，字体大小 48
- **小型印章**：文字半径 80，字体大小 32
- **大型印章**：文字半径 150，字体大小 60