uni-app uni.getImageInfo 读取宽高反了

uni-app uni.getImageInfo 读取宽高反了

开发环境 版本号 项目创建方式
Mac 11.6 HBuilderX

示例代码：

小米8 手机拍摄完图片保存到相册后，调用 getImageInfo API读取到的图片宽高是反过来的， 直接拍摄读取的宽高是没问题的
看附件 实际上的图片宽是3024 高度是 4032 但是 读取出来的是宽度4032 高3042

操作步骤：

小米8 手机拍摄完图片保存到相册后，调用 getImageInfo API读取到的图片宽高是反过来的， 直接拍摄读取的宽高是没问题的
看附件 实际上的图片宽是3024 高度是 4032 但是 读取出来的是宽度4032 高3042

预期结果：

小米8 手机拍摄完图片保存到相册后，调用 getImageInfo API读取到的图片宽高是反过来的， 直接拍摄读取的宽高是没问题的
看附件 实际上的图片宽是3024 高度是 4032 但是 读取出来的是宽度4032 高3042

实际结果：

小米8 手机拍摄完图片保存到相册后，调用 getImageInfo API读取到的图片宽高是反过来的， 直接拍摄读取的宽高是没问题的
看附件 实际上的图片宽是3024 高度是 4032 但是 读取出来的是宽度4032 高3042

https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211008/7e10e73f9b5d837373401811df874168.png

https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211008/c82a4e383bc87054bf8484b3b460e335.jpg

bug描述：

小米8 手机拍摄完图片保存到相册后，调用 getImageInfo API读取到的图片宽高是反过来的， 直接拍摄读取的宽高是没问题的
看附件 实际上的图片宽是3024 高度是 4032 但是 读取出来的是宽度4032 高3042


更多关于uni-app uni.getImageInfo 读取宽高反了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

单独使用 5+ API getImageInfo 测试下是什么表现？

更多关于uni-app uni.getImageInfo 读取宽高反了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


也是错误的

回复 壹念: 好的

回复 壹念: 有没有测试过h5拍照后相片是有可能旋转改方向的

回复 DCloud_UNI_LXH: 这个问题还没修复啊兄弟

2023年了这个问题仍旧存在…我服了

哈哈哈哈哈

这个问题是由于图片的 EXIF 方向信息导致的。uni.getImageInfo 在某些情况下会读取图片的原始像素数据，而忽略 EXIF 中的方向标记（Orientation）。当手机竖拍照片时，相机传感器实际记录的原始数据可能是横向的，并依靠 EXIF 中的方向信息来指示正确的显示方向。

解决方案：

  1. 使用 orientation 参数：uni.getImageInfo 返回的对象中包含 orientation 字段，它表示图片的 EXIF 方向信息。你可以根据这个值手动校正宽高。
  2. 使用 plus.io 或 exif.js 库：如果需要更精确的 EXIF 处理，可以考虑使用原生插件或第三方库来读取图片的完整 EXIF 数据，并根据方向信息计算正确的宽高。
  3. 图片预处理：在上传或显示前，可以通过 canvas 绘制图片并校正方向，确保获取的宽高与实际显示一致。

示例代码（根据 orientation 校正宽高）：

uni.getImageInfo({
  src: 'your_image_path',
  success: (res) => {
    let width = res.width;
    let height = res.height;
    // 如果方向为 6 或 8，表示图片需要旋转，宽高应交换
    if (res.orientation === 6 || res.orientation === 8) {
      [width, height] = [height, width];
    }
    console.log('校正后宽高:', width, height);
  }
});
回到顶部