# 隐私安全的本地图片设计工具

**Repository Path**: tekintian/local-imagedesign

## Basic Information

- **Project Name**: 隐私安全的本地图片设计工具
- **Description**: 隐私安全的浏览器端设计工具 - 支持多尺寸画布、文字编辑、图层管理，一键导出 PDF/PNG。纯前端处理，数据永不上传服务器。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-27
- **Last Updated**: 2026-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎨 LocalImageDesign - 本地图片设计工具

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
[![Version](https://img.shields.io/badge/version-2.0.0-green.svg)](https://github.com/tekintian/local-imagedesign)

**隐私安全的浏览器端设计工具** - 支持多尺寸画布、文字编辑、图层管理，一键导出 PDF/PNG。纯前端处理，数据永不上传服务器。

🌐 **在线体验**: [https://ai.tekin.cn/tools/local-imagedesign](https://ai.tekin.cn/tools/local-imagedesign)

---

## ✨ 核心功能

### 🎨 7 种智能布局模式
- **瀑布流** - 经典的 Pinterest 风格布局
- **网格** - 规整的网格排列
- **创意拼贴** ⭐ - 大小图混合 + 随机旋转特效
- **紧凑网格** - 更密集的网格布局
- **Masonry 砌砖** - 砖墙式错落布局
- **横向排列** - 水平滚动展示
- **居中对齐** - 优雅的居中显示

### 🛠️ 强大的编辑功能
- **图片裁剪** - 支持多种比例（1:1、4:3、16:9 等）
- **拖拽排序** - 直观拖拽调整图片顺序
- **实时预览** - A4 标准尺寸画布，所见即所得
- **精细调节** - 列数、间距、边距、图片缩放全面可调
- **画布缩放** - 50%-150% 自由缩放，一键适应屏幕

### 📄 多格式导出
- **PDF 导出** - 高质量 PDF 文件，适合打印和分享
- **保存图片** - PNG 格式高清图片
- **直接打印** - 浏览器原生打印支持

### 🔒 隐私安全
- ✅ **100% 本地处理** - 所有图片在浏览器本地处理
- ✅ **零数据传输** - 图片永远不会上传到服务器
- ✅ **无用户追踪** - 不收集任何个人信息
- ✅ **会话隔离** - 刷新页面后数据自动清除

---

## 🚀 快速开始

### 方法一：直接使用（推荐）

无需安装，打开浏览器即可使用：

```bash
# 克隆项目
git clone https://github.com/tekintian/local-imagedesign.git

# 进入目录
cd local-imagedesign

# 直接用浏览器打开 index.html
open index.html  # macOS
start index.html # Windows
xdg-open index.html # Linux
```

### 方法二：本地服务器

```bash
# 安装依赖（仅用于压缩工具）
npm install

# 启动本地服务器
npm start

# 访问 http://localhost:8080
```

### 方法三：在线使用

直接访问 [https://ai.tekin.cn/tools/local-imagedesign](https://ai.tekin.cn/tools/local-imagedesign) 即可使用，无需下载。

---

## 📖 使用指南

### 1️⃣ 导入图片

点击右下角的 **「导入图片」** 按钮，或直接拖拽图片到页面。

**支持的格式**: JPG、PNG、GIF、WebP 等常见图片格式

### 2️⃣ 选择布局

在左侧面板选择布局模式：

| 布局模式 | 适用场景 | 特点 |
|---------|---------|------|
| 瀑布流 | 照片墙、作品集 | 高度自适应，自然流畅 |
| 网格 | 产品展示、证件照 | 整齐划一，专业规范 |
| 创意拼贴 | 海报设计、社交媒体 | 大小图混合，视觉冲击 |
| 紧凑网格 | 缩略图预览 | 节省空间，信息密集 |
| Masonry | 艺术展示 | 砖墙效果，独特美感 |
| 横向排列 | 时间轴、流程图 | 水平滚动，叙事性强 |
| 居中对齐 | 单页展示 | 简洁优雅，重点突出 |

### 3️⃣ 调整参数

- **列数**: 1-6 列，控制每行显示的图片数量
- **间距**: 0-50px，调整图片之间的间隔
- **边距**: 0-50mm，设置页面边缘留白
- **缩放**: 50%-150%，调整图片整体大小

### 4️⃣ 编辑图片

- **拖拽排序**: 按住图片拖动到新位置
- **裁剪图片**: 点击图片上的 ✂️ 按钮
  - 支持自由比例或固定比例裁剪
  - 可左右旋转 90°
  - 可重置裁剪区域
- **删除图片**: 点击图片上的 × 按钮

### 5️⃣ 画布缩放

- **放大/缩小**: 点击 + / - 按钮或使用滑块
- **适应屏幕**: 点击 📐 适应屏幕，自动计算最佳缩放比例

### 6️⃣ 导出成果

点击右下角悬浮按钮：

- **💾 保存图片** - 导出为 PNG 格式
- **🖨️ 打印** - 调用浏览器打印功能
- **📄 导出 PDF** - 生成高质量 PDF 文件

---

## 🛠️ 技术栈

### 前端技术
- **HTML5** - 语义化标签，现代 Web 标准
- **CSS3** - Flexbox、Grid、动画过渡
- **JavaScript (ES6+)** - 原生 JS，无框架依赖

### 第三方库
- **[Cropper.js](https://github.com/fengyuanchen/cropperjs)** - 专业的图片裁剪库
- **[html2canvas](https://github.com/niklasvh/html2canvas)** - HTML 转 Canvas 渲染引擎
- **[jsPDF](https://github.com/parallax/jsPDF)** - PDF 生成工具
- **[html2pdf.js](https://github.com/eKoopmans/html2pdf.js)** - 简化 PDF 导出流程

### 开发工具
- **[Terser](https://terser.org/)** - JavaScript 压缩和混淆工具

---

## 📦 项目结构

```
local-imagedesign/
├── src/                    # 源代码目录（开发用）
│   ├── index.html          # HTML 入口
│   ├── js/
│   │   └── app.js          # JavaScript 源代码
│   ├── css/
│   │   └── style.css       # 样式文件
│   ├── assets/             # 静态资源
│   │   ├── images/         # 图片
│   │   ├── icons/          # 图标
│   │   └── fonts/          # 字体（预留）
│   ├── favicon.ico
│   ├── robots.txt
│   └── site.webmanifest
│
├── dist/                   # 构建输出目录（生产用）⭐
│   ├── index.html          # 优化后的 HTML
│   ├── assets/
│   │   ├── js/
│   │   │   └── app.min.js  # 压缩后的 JS
│   │   ├── images/
│   │   └── icons/
│   ├── favicon.ico
│   ├── robots.txt
│   └── site.webmanifest
│
├── docs/                   # 项目文档
│   ├── 目录结构说明.md
│   └── 功能评估.md
│
├── build.js                # 构建脚本 ⭐
├── package.json            # 项目配置
├── README.md               # 项目说明
└── LICENSE                 # 开源许可证
```

**详细说明**: 查看 [docs/目录结构说明.md](docs/目录结构说明.md)

---

## 🚀 快速开始

详细的使用指南请查看：
- 📖 [快速开始指南](docs/快速开始.md) - 5分钟上手
- 📁 [目录结构说明](docs/目录结构说明.md) - 项目架构详解
- 🔄 [重构总结](docs/重构总结.md) - 架构设计思路
- 💡 [功能评估](docs/完整功能评估和实施任务清单.md) - 未来规划

---

## 🔧 开发指南

### 本地开发

```bash
# 1. 克隆项目
git clone https://github.com/tekintian/local-imagedesign.git
cd local-imagedesign

# 2. 安装依赖
npm install

# 3. 启动开发服务器（预览 src/）
npm run preview
# 访问 http://localhost:8081

# 4. 编辑代码
# 修改 src/js/app.js
# 修改 src/css/style.css
# 修改 src/index.html

# 5. 浏览器自动刷新查看效果
```

### 构建生产版本

```bash
# 1. 运行构建
npm run build

# 2. 本地测试生产版本
npm start
# 访问 http://localhost:8080

# 3. 部署 dist/ 目录到服务器
# - GitHub Pages
# - Netlify
# - Vercel
# - 或其他静态托管服务
```

### 修改代码

**开发流程**：
1. **编辑源代码** - 在 `src/` 目录下修改
2. **实时预览** - 使用 `npm run preview` 查看效果
3. **构建优化** - 运行 `npm run build` 生成生产版本
4. **测试部署** - 使用 `npm start` 测试 dist/ 目录

⚠️ **重要**：
- 永远不要直接修改 `dist/` 目录
- 每次修改后重新构建
- `dist/` 已添加到 `.gitignore`，不会提交到 Git

---

## 🌟 应用场景

### 📷 个人用途
- **照片墙制作** - 整理旅行照片、家庭相册
- **作品集排版** - 设计师、摄影师作品展示
- **社交媒体配图** - Instagram、小红书等多图排版
- **纪念册设计** - 生日、婚礼、毕业纪念

### 💼 商业用途
- **产品目录** - 电商产品展示页
- **宣传海报** - 活动宣传、促销海报
- **报告插图** - 工作报告、项目汇报
- **印刷物料** - 名片、传单、手册排版

### 🎓 教育用途
- **教学材料** - 课件插图、学习资料
- **学生作品** - 作业展示、成果汇报
- **研究论文** - 实验图片、数据可视化

---

## 💡 使用技巧

### 获得最佳效果

1. **图片质量** - 使用高分辨率图片，导出更清晰
2. **布局选择** - 根据图片数量和类型选择合适的布局
3. **间距调整** - 少量图片用大间距，大量图片用小间距
4. **创意拼贴** - 适合 5-15 张图片，效果最佳
5. **导出前检查** - 确保所有图片位置和大小满意后再导出

### 常见问题

**Q: 导出的 PDF 模糊怎么办？**  
A: 确保使用高清原图，PDF 导出时使用 3x 缩放，质量更高。

**Q: 如何批量删除图片？**  
A: 点击左侧面板底部的「🗑️ 清空全部」按钮。

**Q: 可以保存项目以便后续编辑吗？**  
A: 当前版本不支持保存项目，建议导出 PDF 或图片后妥善保存。如需再次编辑，需重新导入图片。

**Q: 支持移动端吗？**  
A: 主要针对桌面端优化，移动端可以使用但体验可能不佳。

---

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

### 提交 Bug
1. 检查是否已有相同的 Issue
2. 提供详细的复现步骤
3. 附上截图或错误信息

### 功能建议
1. 描述清楚需求场景
2. 说明期望的实现方式
3. 如有可能，提供设计方案

### 代码贡献
1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

---

## 📄 许可证

本项目采用 [MIT 许可证](LICENSE)。

---

## 🙏 致谢

感谢以下开源项目的支持：

- [Cropper.js](https://github.com/fengyuanchen/cropperjs) by Fengyuan Chen
- [html2canvas](https://github.com/niklasvh/html2canvas) by Niklas von Hertzen
- [jsPDF](https://github.com/parallax/jsPDF) by James Hall
- [Terser](https://terser.org/) by Fabian Eichenberger

---

## 📞 联系方式

- 🌐 网站: [https://ai.tekin.cn/](https://ai.tekin.cn/)
- 📧 Email: [tekin@vip.qq.com](mailto:tekin@vip.qq.com)
- 🐛 Issues: [GitHub Issues](https://github.com/tekintian/local-imagedesign/issues)

---

**Made with ❤️ for better image layout experience**