图片裁剪
图片在线图片裁剪与比例锁定
裁图看起来简单，实际会卡在细节上：证件照要求正方形、视频封面必须 16:9、商品主图不能有多余留白。这些需求要么需要固定比例，要么需要知道自己到底截了多少像素，而很多在线裁剪工具既不告诉你像素数，还会悄悄把输出缩小。
这里的做法是把两件事讲清楚。比例可以锁定成 1:1、4:3、16:9、3:4，锁定后八个控制点怎么拖都不会跑偏；选区信息则直接给出换算回原图的宽高和左上角坐标，所见即所得。预览图为了适配屏幕会被缩小，但裁剪始终按原始像素执行。
操作上，拖框体是平移，拖四角或四边是缩放，松手后右侧预览立刻更新。截图后不用先存文件，Ctrl/Cmd + V 直接粘进来就能裁，这在处理聊天记录、报错弹窗或网页局部时省下不少步骤。
图片全程留在浏览器里，用 canvas 完成绘制和导出，不上传、不排队、不限次数，导出的图上也没有任何水印。最后提醒一点：输出格式会影响结果——PNG 无损且保留透明，WebP 体积最小，而 JPG 会把透明区域变成白底，选之前想清楚这张图接下来要用在哪。
功能一览
- 五种比例：自由裁剪，或锁定 1:1、4:3、16:9、3:4，锁定后拖动任意控制点都会保持比例
- 选区操作：拖动框体整体平移，拖四角与四边共八个控制点改尺寸，选区被限制在图片范围内
- 像素级读数：实时给出原图尺寸以及选区的宽高和左上角坐标，数值已按显示比例换算回原图像素
- 原分辨率输出：预览虽然是缩放显示的，裁剪却按原图像素执行，不会因为预览缩小而损失清晰度
- 三种输出格式：PNG 保留透明通道，JPG 会把透明区域填成白底，WebP 体积更小
- 自动预览：每次松手后右侧预览框立即更新裁剪结果，确认后一键下载
- 输入方式：点击选择、拖入，或截图后直接 Ctrl/Cmd+V 粘贴进来
常见问题
- 裁剪后画质会变差吗？
- 不会明显变差。工具是按原图像素坐标去裁的，中间那张缩小的预览图只用于框选，不参与输出。选 PNG 是完全无损的；JPG 和 WebP 会按约 92% 的质量重新编码，这个档位肉眼基本看不出差别。想要绝对不损失就选 PNG，想要小体积就选 WebP。
- 为什么切换比例后我框好的选区不见了？
- 切换比例时工具会按新比例重新生成一个居中的选区，因为原来的框大概率不符合新比例。正确顺序是先定比例再框选：先点 1:1 或 16:9，然后拖动和缩放那个框。如果只是想微调而不想被重置，就保持在当前比例下操作，或者选「自由」。
- 选区为什么拖不动了、最小能拖到多小？
- 有两个限制。一是选区不允许超出图片边界，拖到边缘就会停住；二是宽高各有 20 像素的最小值，避免出现零尺寸的选区。注意这 20 像素是预览图上的显示尺寸，换算到原图后可能更大。如果需要框特别小的区域，可以先用其他工具放大图片再来裁。
- 能裁剪透明背景的 PNG 吗？
- 可以，只要输出格式也选 PNG，透明区域会原样保留，选 WebP 同样支持透明。但如果输出选了 JPG，透明部分会被填成纯白色，这是 JPG 格式本身不支持 alpha 通道导致的，不是工具的取舍。给带透明背景的 logo 做裁剪时记得确认这一项。
- 支持哪些图片格式，有大小限制吗？
- 只要你的浏览器能解码就能裁，包括 PNG、JPG、GIF、WebP、AVIF 等，文件选择框没有做格式白名单。也没有设固定的体积上限，实际上限取决于浏览器可用内存，几千万像素的照片通常也能处理，只是加载和导出时会稍等一下。预览区会把长边缩到合适尺寸以便操作，输出仍按原图像素。
- 能直接输入像素数值来裁剪固定尺寸吗？
- 目前不支持直接填数值，只能拖动框选。不过右侧的选区读数是实时按原图像素显示的，例如显示 800 × 800 @ (120, 60) 就表示从原图第 120、60 像素开始截取 800×800 的区域，配合比例锁定微调到目标数值并不难。需要严格精确的尺寸时，建议裁完后再用压缩工具确认输出尺寸。