🔒 100% 隐私安全 | ⚡ 无需上传 | 🛡️ 本地处理
一个功能强大的图片裁剪和预览工具，专为内容创作者设计。支持快速裁剪图片并实时预览在小红书和朋友圈的展示效果。
所有图片处理完全在浏览器本地进行，不会上传到任何服务器，您的隐私和数据安全得到最大程度的保护。
- ✅ 无服务器传输：所有图片处理在您的浏览器本地完成
- ✅ 零数据上传：图片数据永远不会离开您的设备
- ✅ 离线可用：支持 PWA，可安装到桌面离线使用
- ✅ 开源透明：代码完全开源，欢迎审计
- 批量上传：支持拖拽或点击上传多张图片
- 智能裁剪：可以上下左右移动图片，选择最佳裁剪位置
- 多种比例：预设多种常用裁剪比例
- 小红书全屏 (3:5)
- 朋友圈全屏 (9:21)
- 正方形 (1:1)
- 横向视频 (16:9)
- 竖向视频 (9:16)
- 4:3
- 自定义比例
- 裁剪操作：支持旋转、翻转、缩放等操作
- 批量处理：一次性裁剪多张图片
- 🔄 旋转适配版型：自动判断图片方向并旋转以适配目标比例，让横图也能完美适配竖屏比例
- 💬 微信发送优化：一键优化图片用于微信发送
- 自动将宽度限制在 1080px 以内
- 智能调整压缩质量，使文件大小接近但不超过 1MB
- 避免微信二次压缩，保持最佳画质
-
小红书预览：像素级还原小红书 APP 的展示效果
- 顶部导航栏和状态栏
- 图片轮播（支持拖拽和滑动）
- 用户信息区域
- 点赞评论等交互元素
-
朋友圈预览：完美还原微信朋友圈
- 支持 1-9 张图片的九宫格展示
- 个人信息卡片
- 朋友圈顶部导航
- 图片点击全屏查看（带轮播）
-
多设备支持：可选择不同 iPhone 型号进行预览
- iPhone 15 Pro Max (430×932)
- iPhone 15 Pro (393×852)
- iPhone 14 Pro (393×852)
- iPhone 13 (390×844)
- iPhone SE (375×667)
-
交互体验
- 📱 全屏预览模式（PC端/移动端）
- 🔄 屏幕旋转支持（竖屏/左横/右横）
- 👆 图片轮播（鼠标拖拽/触摸滑动）
- ⬅️ 返回键关闭全屏（移动端友好）
- 🎯 点击指示器快速跳转
-
响应式设计
- 移动端简洁模式：去除圆角和阴影，宽度 100% 适配
- 自动等比例缩放，避免内容溢出
- 支持窗口大小实时调整
- 单图下载：直接下载单张裁剪后的图片
- 📦 批量打包：多图自动打包成 ZIP 文件
- 自动添加序号前缀（1_xxx.jpg, 2_xxx.jpg）
- 时间戳命名，避免文件覆盖
- 一键下载，告别重复点击
- 高质量导出：JPEG 格式，质量 92%
- 支持格式：JPG、PNG
- Node.js >= 18.0.0
- npm / pnpm / yarn
# 使用 npm
npm install
# 或使用 pnpm（推荐）
pnpm install
# 或使用 yarn
yarn install启动开发服务器：
npm run dev局域网访问（手机预览）：
# 已配置 host: '0.0.0.0'，启动后会显示：
➜ Local: http://localhost:3000/
➜ Network: http://192.168.x.x:3000/在手机浏览器输入 Network 地址即可访问。
# 构建生产版本
npm run build
# 预览生产版本
npm run preview- 框架: Nuxt 3 - Vue 3 全栈框架
- 语言: TypeScript - 类型安全
- 样式: Tailwind CSS - 实用优先的 CSS 框架
- 裁剪: Cropper.js - 强大的图片裁剪库
- 打包: JSZip - ZIP 文件生成
- 状态管理: Nuxt useState - 响应式状态管理
- 包管理: npm / pnpm - 包管理器
leoon-crop/
├── assets/ # 静态资源
│ └── css/ # 全局样式
├── components/ # Vue 组件
│ ├── AspectRatioSelector.vue # 比例选择器
│ ├── CropModal.vue # 裁剪模态框
│ ├── ImageGrid.vue # 图片网格
│ ├── ImageUploader.vue # 图片上传器
│ ├── MomentsPreview.vue # 朋友圈预览
│ ├── PreviewControls.vue # 预览控制面板
│ └── XiaohongshuPreview.vue # 小红书预览
├── composables/ # 组合式函数
│ └── useImageStore.ts # 图片状态管理
├── types/ # TypeScript 类型定义
│ └── index.ts
├── utils/ # 工具函数
│ ├── constants.ts # 常量配置（设备预设等）
│ └── helpers.ts # 辅助函数（裁剪、下载、优化等）
├── app.vue # 主应用组件
├── nuxt.config.ts # Nuxt 配置
├── tailwind.config.js # Tailwind 配置
└── package.json # 依赖配置
- 点击上传区域或拖拽图片文件
- 支持批量上传多张图片
- 支持 JPG、PNG 等常见格式
- 从预设比例中选择（小红书、朋友圈等）
- 或自定义任意比例
- 比例已针对各平台优化
- 点击图片卡片上的"编辑裁剪"
- 拖动调整裁剪区域
- 支持旋转、翻转、缩放
- 预览满意后保存
- 勾选要裁剪的多张图片
- 选择目标比例
- 可选功能：
- ✅ 旋转适配版型：自动旋转横图以适配竖屏比例
- ✅ 优化微信发送：限制宽度 1080px，大小 ≤1MB
- 点击"批量裁剪"一键处理
- 勾选要预览的图片（最多 9 张）
- 选择预览模式：
- 📱 小红书：单图轮播展示
- 💬 朋友圈：1-9 图九宫格
- 选择设备型号和屏幕方向
- 点击"全屏预览"获得沉浸体验
- 支持拖拽切换图片
- 选中一张：直接下载图片
- 选中多张：自动打包成 ZIP
- 一键下载到本地
- 确保电脑和手机在同一局域网
- 启动开发服务器，查看 Network 地址
- 手机浏览器输入该地址
- 简洁模式：移动端非全屏预览自动去除手机边框装饰
- 自适应宽度：手机预览宽度 100%，不会超出屏幕
- 触摸友好：支持滑动切换图片、返回键关闭
- 性能优化：响应式缩放，流畅不卡顿
使用 Canvas API 实现高性能裁剪：
// 1. 居中裁剪算法
// 2. 旋转适配（自动判断横竖图）
// 3. 等比例缩放（限制最大尺寸 4096px）
// 4. 质量控制（JPEG quality 0.92）二分查找算法智能调整压缩质量：
// 1. 宽度限制：> 1080px → 缩至 1080px
// 2. 质量优化：二分查找最佳 JPEG 质量
// 3. 目标：文件大小接近但不超过 1MB
// 4. 最多尝试 8 次，找到最优平衡点Vue 3 响应式系统 + CSS Transform：
// 移动端：
// - 宽度 100%，使用 aspect-ratio 保持比例
// - pointer-events 控制点击穿透
// 桌面端/全屏：
// - transform: scale() 等比例缩放
// - 动态计算缩放比例以适应屏幕使用 Nuxt 3 的 useState 实现全局响应式状态：
export const useImageStore = () => {
const images = useState<CropImage[]>('images', () => [])
const previewMode = useState<PreviewMode | null>('previewMode', () => null)
const rotation = useState<number>('rotation', () => 0)
// ... 更多状态
}智能判断图片方向和目标比例，自动旋转 90° 以获得最佳裁剪效果：
// 示例：
// 横图 (1800×1080) + 竖屏比例 (3:5)
// → 自动旋转 90° → 完美适配一键生成微信不压缩的最佳图片：
- 宽度 ≤ 1080px：避免分辨率损失
- 大小 ≤ 1MB：避免二次压缩
- 质量最优：在限制内尽可能保持高质量
告别重复点击，多图自动打包：
- 自动添加序号前缀
- 时间戳命名防覆盖
- 一次下载全搞定
PC 和移动端完美体验：
- Teleport 技术避免 z-index 问题
- 返回键关闭（移动端友好）
- 点击背景关闭
- History API 实现返回功能
核心依赖：
{
"nuxt": "^3.x",
"vue": "^3.x",
"@nuxtjs/tailwindcss": "^6.x",
"cropperjs": "^1.x",
"jszip": "^3.x"
}欢迎提交 Issue 和 Pull Request！
- feat: 新功能
- fix: 修复 bug
- docs: 文档更新
- style: 代码格式调整
- refactor: 重构
- perf: 性能优化
MIT License
本工具旨在帮助内容创作者：
- 快速裁剪图片到合适比例
- 预览发布后的真实效果
- 提升内容制作效率
感谢以下开源项目：
Made with ❤️ by leoonliang for content creators
如有问题或建议，欢迎提 Issue！