H5中须用FileReader+Image解码获取真实宽高，通过URL.createObjectURL转文件为URL后加载Image，监听onload读取naturalWidth/naturalHeight，失败时onerror清理内存并防泄漏。
在 H5 页面中，仅靠文件名或后缀无法判断图片的真实宽高和像素尺寸，必须通过浏览器的 FileReader + Image 对象来解码并读取原始像素信息。这是前端校验的核心方法，无需上传服务器就能完成。
用 Image 对象加载 File 并获取自然宽高
用户选择文件后，不能直接读取宽高，需先将其转为可访问的 URL（用 URL.createObjectURL()），再创建 Image 实例加载。加载成功后，img.naturalWidth 和 img.naturalHeight 即为真实像素尺寸。
- 务必监听
img.onload，否则可能读到 0 - 加载失败（如损坏图、跨域）要捕获
onerror并清理内存（调用URL.revokeObjectURL()） - 避免多次绑定事件或重复创建对象，建议封装成 Promise 函数
校验逻辑示例（最小/最大宽高、是否正方形等）
拿到 naturalWidth 和 naturalHeight 后，即可按业务规则判断。例如：
- 要求宽 ≥ 800 且高 ≥ 600：
width >= 800 && height >= 600 - 限制总像素数（如 ≤ 200 万）：
width * height - 强制正方形：
width === height - 宽高比校验（如 16:9）：用
Math.abs(width / height - 16 / 9) 避免浮点误差
注意兼容性与边界情况
多数现代浏览器支持，但仍有细节需处理：
立即学习“前端免费学习笔记（深入）”；
- 部分安卓 WebView 或旧版 iOS 可能对 WebP、AVIF 等格式解析异常，建议 fallback 到服务端校验
- 超大图（如 >5000px）在低端设备上可能触发
img.onload延迟或失败，可加超时控制 - 用户取消选择或替换文件时，记得
revokeObjectURL防止内存泄漏 -
input[type="file"]的files[0]是只读 File 对象，无法伪造宽高
不推荐的“伪校验”方式
以下方法不可靠，不能替代真实解码：
- 读取文件二进制头（如 JPEG 的 SOF 标记）——需完整解析文件结构，H5 中实现复杂且易出错
- 依赖
file.size或 MIME 类型推断尺寸——同尺寸不同压缩率的图大小差异巨大 - 用 canvas 绘制后再读
canvas.width/height——绕路且无必要，Image 已足够
