在线图片裁剪工具 — 自由裁剪 · 圆角 · 圆形头像
纯浏览器端运行，图片不会离开你的设备。
| 类别 | 能力 |
|---|---|
| 裁剪模式 | 自由裁剪、圆角裁剪（可调半径 1-50%）、圆形头像（强制 1:1） |
| 图片变换 | 旋转 ±90°、水平/垂直翻转、缩放、一键重置 |
| 宽高比锁定 | 自由、1:1、4:3、16:9、3:2、2:3 |
| 输出格式 | PNG（支持透明背景）、JPEG |
| 上传方式 | 拖拽上传、点击选择、粘贴剪贴板图片（Ctrl+V） |
| 全屏编辑 | 内置全屏模式，最大化编辑空间 |
| 国际化 | 中文 / English，自动检测浏览器语言，偏好持久化到 localStorage |
| 隐私安全 | 完全离线运行，图片不经过任何服务器 |
- Bun ≥ 1.0
# 克隆仓库
git clone https://github.com/0x5c0f/ShapeCrop.git
cd ShapeCrop
# 安装依赖
bun install
# 启动开发服务器
bun run dev浏览器访问 http://localhost:3000。
# 构建
bun run build
# 启动
bun run start构建使用 Next.js standalone 输出模式，产物为自包含目录 .next/standalone/，无需 node_modules。可直接用 Bun 启动，适合容器化部署（Docker 等）。
| 类别 | 技术 | 说明 |
|---|---|---|
| 框架 | Next.js 16 | App Router · standalone 输出 |
| UI 库 | React 19 | 'use client' 纯客户端模式 |
| 样式 | Tailwind CSS v4 + shadcn/ui | new-york style · neutral 主题 |
| 裁剪引擎 | Cropper.js v2 | Web Component 架构 |
| 国际化 | i18next + react-i18next | 中文默认 · en 回退 |
| Toast | Sonner | 轻量通知组件 |
| 包管理 & 运行时 | Bun | 替代 Node.js + npm |
| 类型检查 | TypeScript 5 | strict 模式 |
| Lint | ESLint 9 | flat config · hooks 规则强制 |
src/
├── app/ # Next.js App Router
│ ├── globals.css # Tailwind 入口 + CSS 变量主题
│ ├── layout.tsx # 根布局（元数据、字体、i18n Provider、语言防闪烁脚本）
│ └── page.tsx # 主页面 — 视图状态机: upload → crop → result
├── components/
│ ├── cropper-workspace.tsx # 裁剪工作区核心（Canvas 容器 + 状态编排）
│ ├── crop-toolbar.tsx # 工具栏（裁剪模式 / 宽高比 / 旋转翻转 / 全屏）
│ ├── export-bar.tsx # 导出栏（格式选择 / 导出按钮）
│ ├── image-uploader.tsx # 上传入口（拖拽 / 点击 / 粘贴）
│ ├── language-switcher.tsx # zh-CN ↔ EN 切换按钮
│ ├── html-lang-updater.tsx # 同步 <html lang> 属性
│ ├── sonner-toaster.tsx # Sonner Toast 配置
│ └── ui/ # shadcn/ui 基础组件 (Button / Slider / Badge / Separator)
├── hooks/
│ └── use-cropper-init.ts # Cropper.js 实例初始化与生命周期管理
├── i18n/
│ ├── config.ts # i18next 配置
│ ├── I18nProvider.tsx # 客户端 Provider + 语言检测 / 同步
│ └── locales/
│ ├── zh.json # 中文翻译
│ └── en.json # English translations
└── lib/
├── constants.ts # 全局常量（存储键、默认圆角、JPEG 质量等）
├── crop-export.ts # 裁剪导出管线（画布渲染、裁剪路径、格式转换）
├── image-utils.ts # 图片工具（File → Data URL）
├── types.ts # 共享类型（CropMode）
└── utils.ts # cn() — Tailwind class 合并工具
ShapeCrop 基于以下优秀的开源项目构建：
- Cropper.js v2 — 强大的图片裁剪引擎（MIT License，© Chen Fengyuan）
- Next.js — React 全栈框架
- shadcn/ui — 可组合的 React 组件库
- Tailwind CSS — 实用优先的 CSS 框架
- i18next — 国际化框架
- Bun — 快速的 JavaScript 运行时
GNU Affero General Public License v3.0 — 任何通过网络提供本软件服务的修改版本均须开源。版权持有人可不受此限制提供商业许可。