图片切图
生成
在图片上自由框选多个矩形区域,自定义切图导出,支持单张下载和ZIP打包
点击或拖拽图片到此区域上传
支持 JPG / PNG / WEBP / GIF / BMP 等格式，最大 20MB
工具说明：
工具介绍
图片切图工具是一款支持自定义矩形区域的图片分割工具。与九宫格切图不同，本工具允许你在图片上自由绘制任意数量、任意大小的矩形选区，并将每个矩形区域单独导出。
适用于从设计稿中提取图标、从截图中分离元素、从照片中裁剪人物等多种场景。所有处理均在浏览器本地完成，图片不会上传到任何服务器。
功能特性
| 自由框选 | 在图片上按住鼠标拖拽即可绘制矩形选区，数量和位置完全自定义 | 可视化编辑 | 鼠标拖拽手柄调整大小、拖拽矩形移动、Delete 键删除选中 |
|---|---|---|---|
| 精确微调 | 通过右侧属性面板输入精确的 X / Y / 宽 / 高像素值 | 多种输出格式 | 支持 PNG（无损透明）、JPEG（有损小）、WEBP（现代高压缩）三种格式 |
| 质量可调 | JPEG/WEBP 支持 1-100 质量参数，平衡画质与文件大小 | 单图预览 | 弹窗大图预览切片，方便确认细节后再下载 |
| 批量打包 | 一键将所有选区打包为 ZIP 文件下载，自动处理重名 | 本地处理 | 全程浏览器本地计算，图片不上传，保护隐私 |
使用场景
图标提取
从设计稿中提取多个图标元素，每个图标独立导出为单独文件。
截图分离
从一张长截图中分离出多个区域，单独保存或分享每个部分。
人物裁剪
从合照中裁剪出特定人物，或从场景图中提取主体对象。
UI 组件提取
从网页或 App 截图中提取按钮、卡片、表单等 UI 组件。
使用步骤
上传图片
点击或拖拽图片到上传区域，支持 JPG / PNG / WEBP 等常见格式
绘制选区
在图片上按住鼠标拖拽，绘制第一个矩形选区
编辑选区
点击选区可拖拽移动或调整大小，右侧面板可精确微调
设置输出
选择输出格式（PNG/JPEG/WEBP），必要时调整质量参数
下载导出
逐张下载或一键打包 ZIP 下载所有切图
格式对比
| 格式 | 压缩方式 | 透明背景 | 文件大小 | 推荐用途 |
|---|---|---|---|---|
| PNG | ✓ 无损 | ✓ 支持 | 较大 | 图标、截图、需要透明的场景 |
| JPEG | ✗ 有损 | ✗ 不支持 | 较小 | 照片、不需要透明的场景 |
| WEBP | ✓/✗ 可选 | ✓ 支持 | 最小 | 现代浏览器、综合最优 |
使用技巧
在左侧图片上按住鼠标左键拖拽绘制矩形选区，点击选区可调整大小或移动，按 Delete 键删除选中选区。
单张图片建议不超过 5000×5000 像素、20MB，以保证流畅体验。
PNG 支持透明背景；JPEG 文件更小但不支持透明；WEBP 综合表现优秀，兼容性较好。
所有处理均在浏览器本地完成，图片不会上传到任何服务器。
常见问题
Q1: 如何精确控制选区大小？
点击选中选区后，右侧"选区属性"面板可以输入精确的 X / Y / 宽 / 高像素值，适合需要像素级精确的场景。
Q2: 为什么 JPEG 输出没有透明背景？
JPEG 格式本身不支持透明通道，工具会自动填充背景色（默认白色）。如果需要透明请选择 PNG 或 WEBP。
Q3: 选区数量有限制吗？
没有硬性限制。理论可以创建几百个选区，但建议单张图片不超过 100 个，以保证流畅体验。
Q4: ZIP 打包失败怎么办？
请检查网络环境，确保 jszip 库加载成功。如仍失败可使用"逐张下载"功能。
Q5: 上传的图片会泄露吗？
不会。所有处理均在浏览器本地完成，图片不会被上传到任何服务器。
浏览器兼容性
Chrome 90+Edge 90+Firefox 88+Safari 14+不支持 IE 浏览器建议使用最新版 Chrome / Edge 浏览器，以获得最佳的 Canvas 处理性能和 ZIP 下载体验。