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 后，即可按业务规则判断。例如：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 要求宽 ≥ 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 已足够

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！