在 uni-app 中判断图片是横图还是竖图，最直接且稳定的方法就是使用uni.getImageInfo。它能够返回图片的原始宽度和高度，不需要解析EXIF信息，也不受设备屏幕方向影响。判断方式非常简单：如果width > height，就是横图；如果width < height，就是竖图；若两者相等，则属于方图。只有在需要还原照片拍摄时真实朝向的场景下，才需要进一步结合EXIF中的Orientation字段处理。
uni.getImageInfo 是在 uni-app 里判断图片横竖方向最常用、也最可靠的方法——它直接返回原始宽高，无需解析 EXIF 数据，也不依赖手机或设备当前的显示方向。
用 uni.getImageInfo 获取图片原始宽高比
图片是横图还是竖图，本质上取决于原始像素尺寸的比例关系，而不是页面显示容器大小，更不是设备横竖屏状态。只要获取到 width 和 height，就可以快速判断图片方向：
- 若
width > height→ 横图（landscape） - 若
width < height→ 竖图（portrait） - 若相等 → 方图（square），可根据业务场景自行归类
需要注意的是：uni.getImageInfo 返回的是图片文件本身的像素尺寸，不会受到 mode 属性或 CSS 样式影响。即使你使用 mode="scaleToFill" 对图片进行强制拉伸，图片原始宽高依然不会发生变化。
不要用 windowWidth / windowHeight 判断图片方向
这是开发中非常常见的误区。设备屏幕的宽高只表示当前视口尺寸，与图片本身的横竖属性没有直接关系。比如用户在竖屏手机中查看一张 1920×1080 的图片，虽然 windowWidth < windowHeight，但这张图片本身仍然是横图。
典型错误写法：
const sys = uni.getSystemInfoSync()
if (sys.windowWidth > sys.windowHeight) { /* 错！这是设备方向，不是图片方向 */ }什么时候必须读取 EXIF？
只有当你希望“还原图片拍摄时的真实朝向”时，才需要关注 EXIF 中的 Orientation 字段。举个例子，用户横屏拍摄一张照片时，EXIF 可能会记录为 6（表示顺时针旋转 90°）。这时图片原始宽高可能仍然是竖向像素关系（例如4000×3000），但从实际构图角度来看，应该按横图来处理。
遇到这种情况，通常需要分两步判断：
- 先调用
uni.getImageInfo获取width/height以及orientation字段 - 再根据
orientation的取值（1/3/6/8）推算图片“视觉上”的宽高关系 - 例如
orientation === 6：原始是 4000×3000，但旋转后应按 3000×4000 来理解
在大多数业务场景中，例如缩略图裁剪、瀑布流列表布局、Canvas 绘制等，只需要依赖原始宽高即可；只有在上传后需要服务端渲染，或前端 Canvas 重新绘制并纠正方向时，才有必要主动处理 EXIF 旋转问题。
Canvas 绘图前一定要先校验图片方向
在使用 ctx.drawImage 之前，如果没有提前判断图片是横图还是竖图，很容易把横向图片强行放进竖向容器中，最终导致图片明显变形：
uni.getImageInfo({ src: imgPath }).then(res => {
const isLandscape = res.width > res.height
// 后续 layout 或 draw 逻辑分支从此开始
})开发中常见的坑包括：
- 直接写死参数给
drawImage(img, 0, 0, 300, 200)→ 忽略原始图片比例 - 使用 rpx 固定 canvas 宽高，却没有针对不同方向图片做适配 → 横图被压扁、竖图被拉伸
- 在 H5 与小程序环境中混用
object-fit和mode，误以为样式显示正常就代表图片方向识别正确
真正决定图片横竖方向的核心判断依据，始终是 res.width 和 res.height，其他处理都只是围绕这个结果展开。
