图片裁剪工具

是的，全部在浏览器本地处理，图片不离开浏览器。 裁剪由浏览器原生 Canvas API 完成：原图通过 createImageBitmap 加载， 裁剪通过 ctx.drawImage(img, sx, sy, sWidth, sHeight, 0, 0, dWidth, dHeight) 的源矩形参数 从原图截取指定区域，最终通过 canvas.toBlob() 在内存中生成目标格式的二进制数据。 全程零网络请求，可在浏览器开发者工具 Network 面板确认。

本工具提供 9 种比例：
- 自由：不锁定比例，任意宽高
- 1:1：正方形，头像 / 头图常用
- 4:3 / 3:4：传统屏幕比例（横版 / 竖版）
- 16:9 / 9:16：宽屏视频封面 / 手机竖屏 Stories
- 3:2 / 2:3：单反相机默认比例（横版 / 竖版）
- 自定义：输入宽高比，如 21:9（超宽屏）、5:4（中画幅）等任意比例
选择固定比例后调整裁剪框会自动保持比例；自定义比例需输入宽与高两个数值，工具会自动计算比例。

裁剪框支持整体拖动与8 个手柄调整大小：
- 整体拖动：在裁剪框内任意位置按住鼠标拖动，可移动整个裁剪框（保持尺寸不变）
- 4 个角手柄（左上 / 右上 / 左下 / 右下）：可同时调整宽与高，斜向缩放
- 4 个边手柄（上 / 下 / 左 / 右）：仅调整对应方向的尺寸
拖动时鼠标会变成对应方向的调整光标。锁定比例时所有手柄都自动保持比例， 斜向手柄按对角线缩放，边手柄按当前比例延伸另一方向。

这是由格式特性决定的：
- JPEG 不支持透明通道，转换时透明区域会被填充为默认背景色（白色 #ffffff）
- PNG / WebP / AVIF 支持透明，可保留原图的透明区域
本工具默认导出 PNG 格式以保留透明。如需 JPEG，且原图含透明区域， 会自动填充白色背景避免透明区域变黑（Canvas 默认透明背景为黑色 RGBA 0,0,0,0）。

等比缩放是裁剪后对输出尺寸的限制，仅缩小不放大：
- 不限制（默认）：输出尺寸 = 裁剪区域尺寸（如裁剪 1000×1000 区域，输出 1000×1000）
- 限制最大宽高：若裁剪区域大于设定值，等比缩小到限制内（如裁剪 2000×2000 限制 800，输出 800×800）
使用场景：原图分辨率过高（如 4000×3000），裁剪后仍过大，可直接限制输出尺寸避免二次压缩； 或社交媒体要求特定最大尺寸（如 Twitter 头像最大 400×400）时一步到位。 填 0 表示不限制该方向。

精确数值输入提供 X / Y / 宽 / 高 四个像素级字段，可输入精确数值：
- X / Y：裁剪区域左上角在原图中的坐标（原图坐标系）
- 宽 / 高：裁剪区域的宽度与高度（最小 8px，避免过小导致操作困难）
使用场景：可视化拖动难以精确对齐时（如对齐到固定像素位置、按精确尺寸裁剪）； 或需要按特定尺寸输出（如 200×200 头像）。所有数值均在原图坐标系下， 若原图 4000×3000 像素，X 范围 0-4000，Y 范围 0-3000。

支持 PNG / JPEG / WebP / AVIF 四种格式，但 AVIF 受浏览器编码能力限制：
- PNG / JPEG / WebP：所有现代浏览器均支持编码（Chrome / Firefox / Safari / Edge）
- AVIF：仅 Chrome 93+ 与 Safari 16.4+ 支持 toBlob 编码， Firefox 截至最新版本仍不支持 AVIF 编码（仅支持解码）
工具加载时会自动探测浏览器编码能力，仅显示当前浏览器实际支持的格式选项， 避免选 AVIF 却生成 PNG 的困惑。如需 AVIF 输出，请使用 Chrome 或 Safari。

两者定位不同，互补使用：
- 图片格式转换工具（/image-convert）： 专注格式互转与体积对比，不做几何变换
- 本裁剪工具：专注几何裁剪（位置 / 尺寸 / 比例）， 导出格式仅作为输出选项
如需裁剪 + 转格式：在本工具直接选目标格式即可（已支持 PNG / JPEG / WebP / AVIF）， 无需二次转换。如需裁剪 + 加水印：先用本工具裁剪，再用水印工具（/image-watermark）加水印。

支持。本工具内置历史栈，记录所有裁剪框变更（拖拽、调整手柄、数值输入、比例切换、预设应用、居中、重置、全图等），最多保留 30 步。
- 撤销：点击画布头部的 ↶ 按钮，或按 Ctrl+Z（Mac 为 Cmd+Z）
- 重做：点击 ↷ 按钮，或按 Ctrl+Shift+Z / Ctrl+Y（Mac 为 Cmd+Shift+Z）
- 新图片载入会重置历史栈，仅保留初始状态
- 拖拽过程中的中间状态不记录历史，一次完整拖拽仅作为一个原子操作

九宫格辅助线是摄影与平面构图常用的辅助工具，将裁剪框横向三等分与纵向三等分， 形成 4 条线与 4 个交叉点。
- 启用方式：点击画布头部的 ▦ 按钮切换显示，默认开启
- 构图原则：将主体放在 4 个交叉点之一（三分法构图），或将地平线/水平线放在上下 1/3 线上， 比居中构图更有张力
- 仅视觉辅助：辅助线不参与裁剪计算，仅帮助用户判断构图，关闭后不影响裁剪结果
- 适用于人像、风景、建筑、产品摄影等需要构图考究的场景

支持两种批量下载方式：
- 逐个下载：浏览器逐个触发下载，间隔 200ms 避免拦截。 Chrome 会弹授权、Firefox 默认阻止、Safari 仅触发首个，需手动允许
- 下载为 ZIP：将所有裁剪结果在浏览器本地打包为单个 ZIP 文件（STORE 模式，无压缩）， 一次性下载，避免浏览器多文件下载拦截，体验更佳
ZIP 打包采用纯前端实现（DataView + Uint8Array 构造 ZIP 二进制结构）， 包含完整的 Local File Header + Central Directory + EOCD， 文件名使用 原文件名-cropped.扩展名 格式，ZIP 文件名带时间戳（如 cropped-20260718-1430.zip）。 图片本身已是压缩格式（PNG/JPEG/WebP/AVIF），二次压缩收益极小，故采用 STORE 模式以追求最快打包速度。