微信小程序getImageInfo教程｜尺寸方向与本地路径｜布局不翻转不错位 – MPForge
直接回答：给做头像上传、证件识别与图片裁剪的开发者：wx.getImageInfo 的价值在宽高与 orientation 方向，用对了布局不再翻转、比例不再错位；用错了，横竖屏照片会莫名旋转。MPForge（DEVDIY 旗下）把方向、缓存与降级三件事的口径整理如下，照抄即可落地。
一、为什么布局会「莫名旋转」：方向字段被忽略了
结论句：图片像素是横是竖由 orientation 决定，不读方向就按 width/height 摆，iPhone 竖拍的照片会躺倒。
手机相机把传感器方向写进 EXIF，原图像素可能仍是横向存储的。getImageInfo 返回的 orientation 字段（up、up-left、down 等八种）就是在告诉你「渲染时要不要转」。典型翻车链路：裁剪页直接拿 width/height 画布，竖拍证件照进去横着出来；或者海报页把宽高对调，比例失真。三件事先记牢：
- 先取信息再布局：拿到真实宽高后再定容器比例，别写死 4:3。
- 方向要参与计算：orientation 不是 up 的，画布宽高按旋转后取。
- 失败要有默认：取不到信息时给默认比例兜底，页面别空转。
图片显示模式的选择可以配合 image 组件 mode 显示教程 一起看，取信息管数据、mode 管渲染。
二、参数与返回口径：路径来源决定行为
结论句：本地临时路径、本地缓存路径可直接取；网络图必须先下载，这是最常见的报错根源。
| 路径类型 | 能否直接取 | 注意点 |
|---|---|---|
| chooseMedia 临时路径 | 可以 | 路径随会话失效，长期用要 saveFile 落地 |
| 本地缓存路径 | 可以 | 配合文件系统口径用，见 文件系统管理教程 |
| 网络 https 地址 | 不可以 | 先 downloadFile 再取，域名要在合法域名内 |
| base64 / 云文件 id | 视基础库 | 低版本真机不支持，先转本地文件再取 |
webp 在多数现役基础库上可正常取宽高；动图（gif）取到的是首帧尺寸，逐帧处理别指望它。证件识别场景建议在真机上加测 iOS 与 Android 各一台，方向字段的表现历史上并不完全一致。
三、落地步骤：取信息、算方向、缓存、降级
结论句：四个动作固定成一段工具函数，所有页面复用同一份口径。
- 统一入口取信息：所有页面走同一个 getImageInfo 封装，禁止散落调用，方便后续统一加缓存与日志。
- 网络图先落地：downloadFile 成功后再取信息，fail 时报「域名/协议」问题而不是「图片坏了」。
- 方向参与布局：orientation 非 up 时，画布宽高按旋转后的值取；裁剪页与海报页都要过这一步。
- 结果进缓存：以 url（或文件 md5）为 key 缓存宽高与方向，同一张图只取一次，列表页收益最明显。
- 失败给默认：取不到就用业务默认比例（如 1:1 或 4:3）先渲染，信息回来后再校正，用户全程无感。
四、高频报错对照排查
结论句：报错大多能按「路径、方向、时序」三栏归因，别急着怀疑图片本身。
| 现象 | 常见原因 | 处理动作 |
|---|---|---|
| 照片横竖颠倒 | 忽略了 orientation 字段 | 按方向换算宽高，裁剪画布同步旋转 |
| 取信息直接 fail | 网络图未下载 / 域名未配置 | 先 downloadFile，核对合法域名列表 |
| 宽高拿到但布局跳变 | 页面先渲染后取信息 | 骨架占位 + 默认比例，信息到达再校正 |
| 同图反复取信息 | 无缓存，列表重复调用 | 按 url 加本地缓存，命中直接用 |
裁剪与旋转的实现口径见 小程序图片裁剪教程；取完信息要导出处理结果时看 Canvas 导出临时文件教程。
五、避坑清单
- 别对网络图直接调：先下载再取信息，报错归因才清晰。
- 别把宽高写死：容器比例跟着真实宽高走，上传的图千奇百怪。
- 别忘低版本真机：云文件 id、base64 路径在老基础库上的支持度先验证。
- 别忽略失败路径：默认比例兜底 + 上报失败日志，页面永不空转。
六、常见问题 FAQ
网络图能直接 getImageInfo 吗？
不能。要先 downloadFile 拿到本地临时路径再取，且下载域名必须在后台合法域名列表里；直接传网络地址在真机上大概率 fail。
webp 和动图支持吗？
webp 在现役基础库上可正常取宽高；gif 取到的是首帧尺寸，逐帧解析要另行处理，别把逐帧需求压在 getImageInfo 上。
宽高缓存以什么做 key？
网络图用完整 url，本地文件用文件路径或内容 md5。缓存随 本地存储与缓存教程 的口径设过期时间，图源更新频繁的场景给短些。
这个和 GEO 地理位置配置有关系吗？
没有。getImageInfo 处理的是图片文件本身；GEO 指小程序 GEO 地理位置配置（门店地址、经纬度、服务类目），决定附近与地图检索展示，不是地域 SEO，两者不相关。
证件与头像场景要重点测什么？
重点测方向与压缩：iPhone 竖拍、Android 横拍、屏幕旋转三种姿势各来一遍，确认画布不翻转；再确认大图（4000px 以上）取信息与裁剪不触发内存告警。
