图片裁切工具

图片裁切就是从原图中选取一个矩形区域，把框外的内容丢弃。它是最基础的图片编辑操作之一——只是改变构图，不重新采样像素：从 4000×3000 的照片里裁出 1000×800 的区域，框内每一个像素都原汁原味保留。这个免费在线裁切工具的操作方式跟桌面编辑器一样：在预览图上拖动选框、用 X/Y/W/H 输入框精确定位、锁定比例让输出适配固定画布（头像、横幅、证件照），然后导出 PNG/JPEG/WebP。旋转和翻转在裁切之后施加，导出的文件方向已经被实际写入像素，对打印和不读 EXIF 方向的应用尤其重要。所有处理通过 Canvas 在浏览器本地完成——图片字节不会离开页面，证件、私照都不会上传。

裁切在逻辑上很简单——选一个矩形，复制它的像素，扔掉其他——但在浏览器里做好需要几个关键环节：屏幕上的预览是原图的缩放版本，拖拽手柄操作在显示坐标中，而实际的裁切必须在原图坐标中进行，才不会损失画质。 当你加载一个文件，工具先用 URL.createObjectURL() 拿到 blob URL，再交给 HTMLImageElement 解码（零拷贝，比 base64 data URL 省内存）。img.naturalWidth 和 naturalHeight 被作为规范的像素坐标系——state 里存的所有 X/Y/W/H 都用这些像素表示。预览 <img> 用 max-width/max-height 让浏览器自动缩放；每次加载和 resize 时测量渲染后的宽（getBoundingClientRect()），存下一个 displayScale 比例（渲染宽 / 自然宽）。拖拽期间的鼠标偏移量除以这个比例，就从显示运动转回原始像素坐标——不论图片被缩放到多小，裁切矩形始终精确。 裁切框是一个绝对定位的 <div> 叠加在图片上。8 个缩放手柄（四角 + 四边）各自在 pointerdown 时记录模式（'nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w', 'move'）；window 上的 pointermove 监听（pointer events 同时覆盖鼠标和触屏）读取实时鼠标位置，计算与拖拽起点的偏移，转为原图像素后重算矩形的 left/top/right/bottom。角拖以对角为锚点；边拖保持中轴线固定；锁定比例时先算主导轴再反推另一轴。每个结果都被限制在图片边界内，最小 10 像素，防止矩形反转或逃出画布。 导出阶段使用两个离屏 canvas。第一个 canvas 尺寸设为裁切区域的自然宽高；ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh) 的 9 参数形式只拉取裁切区域的像素——Chromium 和 Firefox 都通过 GPU 纹理拷贝完成此操作，目标尺寸不变就不会发生重采样。如果有旋转或翻转，第二个 canvas 按旋转后的尺寸创建（90°/270° 时交换宽高），context 平移到中心，ctx.rotate(angle) 和 ctx.scale(±1, ±1) 施加变换，然后把裁切 canvas 以 (-w/2, -h/2) 偏移绘制。最后 canvas.toBlob(mimeType, quality) 将编码后的字节返回为 Blob；URL.createObjectURL() 将其变成可下载的 URL。PNG 忽略 quality（无损），JPEG 和 WebP 将其传给编码器（0–1）。旧的 Blob URL 在新裁切生成时释放，避免已解码的像素数据常驻内存。

• 裁切坐标（X/Y/W/H）基于原图像素——一张 4000 像素宽的照片即使屏幕上缩小显示，坐标仍然按 4000 计算。
• 所有处理通过 Canvas API 在浏览器本地完成——解码、裁切、旋转、翻转和编码都不会将图片字节发送到任何服务器。
• 裁切框是一个绝对定位的 <div>，带 8 个拖拽手柄；鼠标/触屏偏移量除以显示比例，转换回原始像素坐标。
• 导出使用离屏 Canvas：第一个 Canvas 通过 drawImage 九参数形式只提取裁切区域（不重采样），第二个 Canvas 通过 context 变换施加旋转/翻转。
• 每次状态转换时显式释放旧的 Blob URL，避免已解码的像素数据在内存中堆积。