# image-background-remover

**Repository Path**: robo/image-background-remover

## Basic Information

- **Project Name**: image-background-remover
- **Description**: A modern image background removal tool using remove.bg API
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-10
- **Last Updated**: 2026-04-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎨 图片背景移除工具

一个现代化、快速、高质量的图片背景移除网站，使用 remove.bg API 实现。

## ✨ 特性

- ⚡ **快速处理** - 几秒钟内完成背景移除
- 🎯 **精准识别** - AI驱动的智能识别，保留细节
- 🔒 **隐私安全** - 图片处理完成后自动删除
- 🎨 **现代化UI** - 基于 Tailwind CSS 的精美界面
- 🌓 **深色模式** - 支持深色主题
- 📱 **响应式设计** - 完美适配移动端和桌面端

## 🛠️ 技术栈

- **前端**: Next.js 14 + React + TypeScript
- **UI**: Tailwind CSS
- **文件上传**: React Dropzone
- **API**: remove.bg API
- **HTTP客户端**: Axios

## 📦 安装

### 1. 克隆项目

```bash
git clone https://github.com/yourusername/image-background-remover.git
cd image-background-remover
```

### 2. 安装依赖

```bash
npm install
```

### 3. 配置环境变量

复制 `.env.example` 文件为 `.env`：

```bash
cp .env.example .env
```

编辑 `.env` 文件，填入你的 remove.bg API 密钥：

```env
REMOVE_BG_API_KEY=your_remove_bg_api_key_here
```

### 获取 API 密钥：

1. 访问 [remove.bg API](https://www.remove.bg/api)
2. 注册账号
3. 获取免费API密钥（每月50次免费额度）
4. 复制API Key到 `.env` 文件

## 🚀 运行

### 开发模式

```bash
npm run dev
```

访问 http://localhost:3000

### 生产构建

```bash
npm run build
npm start
```

## ☁️ Cloudflare Pages 部署

### 快速部署

```bash
# 运行部署脚本
./deploy-cloudflare.sh
```

### 手动部署

详细部署步骤请查看 [DEPLOYMENT.md](./DEPLOYMENT.md)

**简单步骤：**

1. 推送代码到 GitHub/GitLab
2. 在 Cloudflare Dashboard 创建 Pages 项目
3. 连接 Git 仓库
4. 配置构建设置：
   - 构建命令: `npm run build`
   - 输出目录: `.next`
   - Node.js 版本: `20.x`
   - 环境变量: `REMOVE_BG_API_KEY=你的API密钥`
5. 保存并部署 ✨

**优势：**
- 🆓 完全免费
- 🌍 全球 CDN
- 🔒 自动 HTTPS
- 🚀 自动部署（Git 推送即部署）
- 📊 内置分析

## 📸 使用方法

1. 打开网站
2. 拖拽图片或点击选择文件
3. 点击"移除背景"按钮
4. 等待处理完成（2-5秒）
5. 下载处理后的图片

## 📁 项目结构

```
image-background-remover/
├── app/
│   ├── api/
│   │   └── remove-bg/
│   │       └── route.ts       # API路由
│   ├── globals.css            # 全局样式
│   ├── layout.tsx             # 根布局
│   └── page.tsx               # 主页面
├── components/
│   ├── ImageUploader.tsx      # 图片上传组件
│   └── ImagePreview.tsx      # 图片预览组件
├── public/                    # 静态文件
├── .env.example              # 环境变量示例
├── next.config.js            # Next.js配置
├── package.json              # 项目依赖
├── tailwind.config.ts        # Tailwind配置
└── tsconfig.json             # TypeScript配置
```

## 🔧 API说明

### POST /api/remove-bg

移除图片背景

**请求体：**
```json
{
  "imageData": "data:image/png;base64,..."
}
```

**响应：**
```json
{
  "processedImage": "data:image/png;base64,...",
  "success": true
}
```

**错误响应：**
```json
{
  "error": "错误信息"
}
```

## 📝 许可证

MIT License

## 🙏 致谢

- [remove.bg](https://www.remove.bg/) - 提供背景移除API
- [Next.js](https://nextjs.org/) - React框架
- [Tailwind CSS](https://tailwindcss.com/) - CSS框架

## 📮 联系方式

如有问题或建议，欢迎提交 Issue 或 Pull Request。

---

_Made with ❤️ by 药老_