# picture-modify

**Repository Path**: gotfocus/picture-modify

## Basic Information

- **Project Name**: picture-modify
- **Description**: 这是一个基于 React + TypeScript + Vite 开发的图片处理工具，用于调整图片尺寸和压缩图片大小。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-14
- **Last Updated**: 2026-04-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 图片处理工具

这是一个基于 React + TypeScript + Vite 开发的图片处理工具，用于调整图片尺寸和压缩图片大小。

## 功能特点

- 支持图片上传（点击或拖放）
- 可自定义图片尺寸（宽度和高度）
- 支持多种图片格式（JPG、PNG、WebP）
- 智能压缩算法，确保图片大小在指定范围内（默认 30-40KB）
- 实时预览处理结果
- 支持下载处理后的图片

## 技术栈

- React 18
- TypeScript
- Vite
- Tailwind CSS
- Lucide React（图标库）

## 安装和运行

### 安装依赖

```bash
npm install
```

### 开发模式运行

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

## 项目结构

```
picture-modify/
├── src/
│   ├── components/    # 组件
│   ├── hooks/         # 自定义钩子
│   ├── lib/           # 工具函数
│   ├── pages/         # 页面
│   ├── App.tsx        # 应用主组件
│   └── main.tsx       # 应用入口
├── public/            # 静态资源
├── dist/              # 构建输出
├── .gitignore         # Git 忽略文件
├── package.json       # 项目配置
└── README.md          # 项目说明
```

## 使用说明

1. 点击或拖放图片到上传区域
2. 设置图片宽度和高度
3. 选择输出格式（JPG、PNG、WebP）
4. 点击"处理图片"按钮
5. 预览处理结果
6. 点击"下载图片"按钮保存处理后的图片

## 注意事项

- 图片大小会自动压缩到 30-40KB 之间，以确保图片质量和大小的平衡
- 处理后的图片尺寸会保持您指定的大小
- 支持的图片格式包括 JPG、PNG 和 WebP