先把问题解决
先确认源图尺寸，再按“源图尺寸÷显示尺寸”换算选区。比例预设帮助构图，但严格要求1280×960的交付仍须检查下载文件；本次4:3预设实际显示并导出了1280×959，不能把理想算式当成每次运行的保证。
屏幕上的选区，不是原文件的像素数
预览为了装进浏览器窗口，会把大图显示得更小。屏幕上的横坐标40，表示从显示图左边走40个显示单位；当整张图缩小到四分之一宽时，它对应源图横坐标160。把这两个坐标系混用，就会误以为裁剪器放大了文件。
本站当前实现按图像的naturalWidth与显示宽度计算横向比例，纵向单独计算。MDN对naturalWidth的说明指出它是经过密度校正的固有CSS像素宽度，不应无条件等同于所有原文件编码像素。本例使用普通PNG，浏览器读取的固有尺寸与文件解码尺寸均为1600×1000。
如果实际问题是上传平台要求某个宽高或比例，先阅读像素与纵横比交付指南。这里解决的是选区如何对应原图，并不替平台决定尺寸规格。
把一块320×240的选区换算回原图
先用一组刻意整齐的教学尺寸解释算法：源图1600×1000，显示图400×250，横纵比例都等于4。选区左上角在显示图的(40,5)，宽320、高240。坐标原点是图像左上角，不包括页面边距或浏览器工具栏。
因此源图选区为x=40×4=160，y=5×4=20，宽320×4=1280，高240×4=960。它保留原图从x=160到1440、从y=20到980的矩形范围；右、下边界这里按不包含终点理解。
| 项目 | 显示图 | 乘以4后的源图 |
|---|---|---|
| 整图 | 400×250 | 1600×1000 |
| 左上角 | (40,5) | (160,20) |
| 选区宽高 | 320×240 | 1280×960 |
实际下载为什么是1280×959
2026年10月27日，我们把带彩色区域和边界标记的自编1600×1000 PNG放入当前线上图片裁剪工具，在1440×1000浏览器视口选择4:3。界面显示选区1280×959，下载后的PNG解码尺寸同样是1280×959；独立比对像素也能对应到源图选区。
这次记录支持“界面显示与导出一致”，并不支持“4:3按钮总能输出数学上严格的4:3整数尺寸”。显示图尺寸、比例框和源坐标换算涉及舍入，一像素差异足以改变严格尺寸验收。理想教学中的400×250也不是本次实际预览尺寸。
Canvas drawImage说明区分源图矩形和目标画布尺寸：选择源图哪一部分，与最后画成多大是两项决定。实际工具还要把矩形边界落到整数像素，不能只检查按钮上写着4:3。
把验收对象说准确
选了4:3，所以交付一定是1280×960。
本次界面与下载均为1280×959；若接收方必须1280×960，这份结果尚未满足规格。
用同一原图重复一次，再检查真实文件
本页练习包提供自编PNG、理想坐标说明和本次参考输出，便于重复观察；它不是客户照片。不同窗口大小可能产生不同舍入结果，不必为了复现959这个数字去反复调整视口。目标是理解映射并验收自己的文件。
- 打开图片裁剪，上传练习PNG或自己的副本。
- 进入裁剪框，选择所需比例并调整位置；先看界面所显示的源图选区尺寸。
- 应用裁剪并导出PNG，重新打开下载文件核对宽高和内容。
下载后检查三件事
- 在文件信息或图像查看器中读取实际宽×高，不用屏幕缩略图尺寸代替。
- 对照彩色区域和边界，确认裁掉的是预期位置，主体没有被误切。
- 保留原图和输出副本；把精确尺寸要求与本次实际结果一起记录。
严格尺寸与清晰度，分别做决定
如果接收方容许约4:3构图，1280×959可能可以接受；如果接收方明确要求1280×960，就应在具备精确像素控制的流程中重新制作或调整，并再次验收。本文不把当前裁剪界面描述为可以输入任意x、y、宽、高的精确坐标编辑器。
把选区放大到更大输出，也不会自动恢复被裁掉的内容或生成新的真实细节。打印中的像素与物理尺寸关系另见打印PPI核对方法。先确认保留的内容，再确认像素；两项都通过后交付。
参考资料与延伸阅读
按步骤开始处理
进入对应工具，预览处理结果，检查导出的文件。
