图片裁剪

使用方法

1. 点「选择本地图片」挑一张图，PNG、JPEG、WebP、GIF、BMP 都能读。图片只在你自己的浏览器里解码，没有任何上传请求。
2. 载入后结果区显示原始像素宽高（示例源图 4000×3000），四个选区框会被自动填成一块常规取景，然后你在这个基础上微调。
3. 「选区 X」和「选区 Y」是这块矩形左上角在源图里的坐标。图像坐标系原点是左上角，X 向右为正、Y 向下为正，示例是 1200 和 1050。
4. 「选区宽」和「选区高」是矩形本身的尺寸，示例 1600 和 900，也就是默认那一档 16:9。
5. 「比例约束」选 1:1、16:9、4:3、3:2、9:16 时，改宽会自动算出高、改高会自动算出宽；选「自由」则两个方向各填各的。
6. 点「裁剪并导出 PNG」，浏览器把选区那一块矩形原样搬到新画布上并触发下载，文件名的形式是 crop-1200x1050-1600x900.png。

这个图片裁剪工具能解决什么

一是改构图不改画质。证件照要方图、封面要 16:9、商品图要固定比例，实际要做的只是从原图里框出一块矩形，剩下的像素原封不动。因为不重采样，画面不会变糊，也不会出现缩放带来的细节丢失。

二是把「凭感觉拖框」变成可复现的四个数。图片裁剪工具把操作拆成 X、Y、宽、高：要做一批同样取景的图，把这四个数抄下来重复用即可，不需要凭手感对齐。对照表里 12 组常用选区就是照这个思路列的。

三是精确到像素地取局部。扫描件里只留某一栏、长图里只取一段、海报里只截一个小图标，都要求边界不差一像素。用坐标框选比用鼠标拖拽稳定得多。

四是顺手统一长宽比。素材来自手机、相机、截图拼在一起时比例五花八门，勾上 16:9 或 1:1，改一个数字另一边自动跟随，出来的图直接能排进同一套版式。

本页的图片裁剪只改画面范围：不旋转、不翻转、不加水印、不调色，也不做批量队列，一次一张。它和「图片尺寸调整」是两件事——那一页改的是整张图的像素总量，本页改的是保留原图的哪一块，输出尺寸由选区决定而不是由你填目标尺寸。

裁剪原理：drawImage 九参数只取一块矩形

裁剪落在 CanvasRenderingContext2D.drawImage() 的九参数重载上。签名是 drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)：前四个 sx, sy, sw, sh 在源图上框出一个矩形，后四个 dx, dy, dw, dh 把这块矩形画到目标画布的矩形里。裁剪的全部秘密就在这两组参数的配合上——本页固定 dx=0, dy=0，并且让 dw=sw、dh=sh，于是源图矩形与目标矩形尺寸完全相等，一个输出像素只对应一个源像素，浏览器不需要做任何插值。这就是「只裁不拉伸」的字面含义：缩放比恒等于 1.00。

反过来说，只要 dw ≠ sw，裁剪就变成了缩放。那是「图片尺寸调整」要解决的问题，用本页做反而会得到一张模糊的图。所以本页把 target 矩形锁死，只让用户控制源矩形。

坐标系沿用 canvas 的约定：原点在左上角。sx 向右增加、sy 向下增加，单位是像素而不是 CSS 像素或百分比，所以缩放浏览器窗口、切换系统缩放比例都不会改变结果。四个数都必须是整数，小数会被拒绝。

比例约束是加在四个数之上的锁。选 16:9 时，宽高满足 sh = round(sw × 9 / 16)；选 1:1 时 sh = sw；选 4:3 时 sh = round(sw × 3 / 4)。示例宽度 1600 对应的三个高度分别是 900、1600、1200，都能整除；而 3:2 时 round(1600 × 2 / 3) = 1067，不是整数倍的比就一定会取整，实际比例会偏离理论值一点点（1600:1067 ≈ 1.4995，而不是 1.5），这是像素只能是整数的必然结果。

EXIF 方向会直接影响裁剪坐标。手机竖拍的照片，像素数据往往是横的，方向记录在 EXIF 的 Orientation 字段里。如果按原始像素去取 (sx, sy)，你框的位置会和屏幕上看到的方位对不上，导出后还会躺倒。本页优先用 createImageBitmap(blob, { imageOrientation: 'from-image' })，让解码器先把像素摆正，再去算选区坐标；旧浏览器才退回 Image 元素。

越界不会报错，只会静默出问题。当 sx + sw 超过源图宽度时，超出画布范围的部分不会抛异常，而是被当作透明处理——你得到的图上会多出一条空白或黑边，却看不出哪里错了。所以本页在导出前先算 sx + sw 与源图宽、sy + sh 与源图高的关系，越界时把超出的像素数直接写进提示。

完整示例（数值仅作演示）

示例条件与页面打开时的默认值完全一致：源图 4000×3000、选区起点 (1200, 1050)、选区 1600×900、比例 16:9。

• 源图 4000×3000 = 12,000,000 像素，RGBA 缓冲 12,000,000 × 4 = 48,000,000 字节 = 45.78 MiB；
• 选区右边界 1200 + 1600 = 2800，小于 4000；下边界 1050 + 900 = 1950，小于 3000，都不越界；
• 输出 1600×900 = 1,440,000 像素，RGBA 缓冲 5.49 MiB，占源图面积的 12.00%；
• 因为 dw=sw=1600、dh=sh=900，缩放比是 1.00，1,440,000 个像素被 1:1 搬运；
• 换成 1:1：选区 (1500, 1000) 取 1000×1000 = 1,000,000 像素、RGBA 3.81 MiB、占源图 8.33%；
• 换成 4:3：选区 (1200, 900) 取 1600×1200 = 1,920,000 像素、RGBA 7.32 MiB、占源图 16.00%。

再看一条边界示例：把「选区 X」填 3600、「选区宽」填 800，右边界就是 4400，超过源图宽 4000 整整 400 px；本页会拦下来并写明超了多少，而不是给你一张右边发虚的图。

选区与输出对照表

下表固定源图 4000×3000，列出 12 组常用选区及其输出像素与 RGBA 缓冲。RGBA 缓冲 = 宽 × 高 × 4 字节，是这块位图在内存里的真实占用，和文件体积不是一回事。可以看出输出像素与选区尺寸严格相等，从不因为比例约束而改变。

点「加载更多选区」再补 6 行（含整图不裁、2000×2000 方图、2560×1440 等）；点「导出 CSV」把当前可见的整张表存成带 BOM 的 CSV，Excel 打开不乱码；点「复制对照表」复制成制表符分隔的文本，可直接粘进表格软件。

边界与精度说明

• 选区 X / Y 允许 0～65535，宽 / 高允许 1～65535，都只收整数。宽或高为 0 时画布不存在，浏览器会直接抛 IndexSizeError；小数会被拒绝，因为源图上不存在半个像素。
• 选区必须完整落在源图内。X + 宽 不能超过源图宽，Y + 高 不能超过源图高。超出时 drawImage 不报错，超出部分按透明处理，你只会看到一条凭空多出来的空白边。
• 画布还有两条硬上限：单边 65535 px、总面积 268435456 px（约 16384×16384）。即使 X、Y 都为 0，选区 16500×16400 = 270,600,000 像素也会超限，本页会拦下来并写明超了多少。
• 裁剪不改变像素密度，也不提升清晰度。输出 1600×900 就是 1600×900 个原样像素；把它放到 Retina 屏或印刷时看到的那点模糊，是原图本身的分辨率决定的，不是裁剪造成的。
• 比例约束会取整。像 3:2 这种不能整除的比例，宽度 1600 算出的高度是 1067 而不是 1066.67，实际比例约 1.4995，比理论值略窄一丝。这是像素必须为整数的结果，不是精度缺陷。
• 输出统一是 PNG。裁剪本身是几何操作，用无损 PNG 保存可以保证框内像素与源图逐位相同；PNG 会把原图透明区域一并保留。JPEG 没有透明通道，因此不作为本页的默认输出。
• 源图的 EXIF 元数据不会写进输出。canvas 产出的位图只有像素，相机型号、拍摄时间、GPS 都不会带过去；对在意隐私的人是好事，对想保留拍摄参数的人是损失。
• 一次只处理一张。本页刻意不做批量队列：批量导出容易在命名对应关系上出错，多张素材建议用桌面端图像软件处理。

常见问题

相关工具

• 图片压缩工具：裁剪完还想把文件变小就用它，只压体积、不改画面范围。
• 图片格式转换：把裁好的 PNG 换成 JPEG 或 WebP，尺寸保持不变。
• 旋转图片在线：先把摆歪的照片转正，再回到本页框选区域，顺序反了会白裁一次。
• 翻转图片在线：需要左右或上下镜像时用，和裁剪是两类不同的几何操作。
• 添加水印转图片：裁好画面后再加字或加 logo，避免水印被裁掉一半。
• 图片尺寸查询：先查清源图到底多少像素，再来定选区坐标更稳妥。
• 模糊图片在线：给局部打码时用，和裁剪搭配可以做「先裁再模糊」的流程。
• 缩略图生成：列表页用的索引小图，本质是缩放而不是裁剪。
• 图片工具：查看全部图片工具。