• 批量处理: 支持同时处理多张图片
• 实时预览: 拖拽调节圆角半径，实时查看效果
• 灵活导出: 支持单张下载或批量打包下载
• 格式支持: PNG、JPG、JPEG、WebP 等主流格式

• 智能裁剪: 居中裁剪，保持图片主要内容
• 预设比例: 1:1、4:3、3:2、16:9 等常用比例
• 自定义尺寸: 支持自定义宽度和高度
• 实时预览: 裁剪前后对比预览

• 多格式支持: PNG ↔ JPEG ↔ WebP 互转
• 质量控制: JPEG/WebP 格式支持质量调节 (10%-100%)
• 背景设置: PNG 透明转换时可设置背景色
• 批量转换: 支持多文件同时转换和打包下载

• 多尺寸生成: 自动生成 16x16 到 512x512 等 12 种常用尺寸
• 标准兼容: 支持浏览器、移动设备、PWA 等各种场景
• 代码生成: 自动生成完整的 HTML 代码片段
• ICO 支持: 可选生成传统 .ico 格式文件
• Manifest 文件: 自动生成 PWA manifest.json

• Vue 3 - 渐进式 JavaScript 框架
• TypeScript - 类型安全的 JavaScript 超集
• Vite - 下一代前端构建工具

• Naive UI - Vue 3 组件库，提供丰富的 UI 组件
• Headless UI - 无样式的可访问 UI 组件
• Heroicons - 精美的 SVG 图标库
• Lucide Vue - 现代化图标库

• Fabric.js - 强大的 Canvas 图形处理库
• HTML2Canvas - HTML 转 Canvas 截图库
• File-saver - 客户端文件保存库
• JSZip - JavaScript ZIP 文件处理库

• ESLint - 代码质量检查
• Prettier - 代码格式化
• Vitest - 单元测试框架
• UnoCSS - 原子化 CSS 引擎

• Node.js >= 20.19.0 或 >= 22.12.0
• npm 或 yarn 或 pnpm

# 使用 npm
npm install

# 使用 yarn
yarn install

# 使用 pnpm
pnpm install

npm run dev

npm run build

npm run preview

1. 点击"选择文件"或直接拖拽图片到上传区域
2. 使用滑块调节圆角半径 (0-50px)
3. 实时预览处理效果
4. 点击"处理图片"生成圆角图片
5. 支持单张下载或批量打包下载

1. 上传需要裁剪的图片
2. 设置目标宽度和高度，或选择预设比例
3. 系统自动进行居中裁剪
4. 预览裁剪效果
5. 下载处理后的图片

1. 选择需要转换的图片（支持多选）
2. 选择目标格式：PNG、JPEG、WebP
3. 调节质量参数（JPEG/WebP）
4. 设置背景色（PNG 透明转换）
5. 批量转换并下载

1. 上传正方形图片（推荐）
2. 系统自动生成 12 种常用尺寸
3. 设置图标文件路径
4. 选择是否生成 .ico 文件
5. 下载完整的 Favicon 包
6. 复制生成的 HTML 代码到网站

• 采用紫色主题色调，界面美观现代
• 响应式设计，支持移动端和桌面端
• 虚线边框设计，功能区域清晰分明

• 基于 Canvas 的图片处理，性能优异
• 实时预览功能，所见即所得
• 批量处理能力，提高工作效率

• 拖拽上传，操作简便
• 详细的文件信息显示
• 智能的错误处理和用户提示

• 支持所有现代浏览器
• 移动端友好的响应式设计
• PWA 支持，可安装到桌面

image-tools/
├── public/                 # 静态资源
├── src/
│   ├── assets/            # 项目资源文件
│   ├── components/        # 可复用组件
│   │   ├── icons/         # 图标组件
│   │   └── __tests__/     # 组件测试
│   ├── router/            # 路由配置
│   ├── stores/            # 状态管理
│   ├── views/             # 页面组件
│   │   ├── RoundedCornerView.vue    # 圆角处理页面
│   │   ├── CropView.vue             # 图片裁剪页面
│   │   ├── ConvertView.vue          # 格式转换页面
│   │   └── FaviconView.vue          # Favicon生成页面
│   ├── App.vue            # 根组件
│   └── main.ts            # 应用入口
├── index.html             # HTML 模板
├── package.json           # 项目配置
└── vite.config.ts         # Vite 配置

• 简洁直观的操作界面
• 最少的学习成本
• 快速的处理响应

• 覆盖常见的图片处理需求
• 专业级的处理质量
• 灵活的参数配置

• 采用最新的前端技术栈
• 模块化的代码组织
• 可扩展的架构设计

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

魔法代码 - 专注于前端开发和用户体验设计

---