uni-app 小米手机上传图片与相册方向不符

uni-app 小米手机上传图片与相册方向不符

开发环境 版本号 项目创建方式
Windows 20H2 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：20H2

HBuilderX类型：正式

HBuilderX版本号：3.1.13

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：小米9pro

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```javascript
plus.gallery.pick(  
    function(e) {  
        uni.previewImage({  
            urls: e.files,  
        });  
function(e) {},  
                { filter: 'none', multiple: true, maximum: 9 - that.$store.state.phonelist.length, system: false, onmaxed: function() {} }  
            );

操作步骤：

plus.gallery.pick(  
    function(e) {  
        uni.previewImage({  
            urls: e.files,  
        });  
function(e) {},  
                { filter: 'none', multiple: true, maximum: 9 - that.$store.state.phonelist.length, system: false, onmaxed: function() {} }  
            );

预期结果：

图片按相册方向显示

实际结果：

图片按相册方向逆时针旋转0°

bug描述：

使用uni.chooseImage或plus.gallery.pick选择用手机拍摄过的竖向照片会自动横向显示，截图，保存的图片都正常显示


更多关于uni-app 小米手机上传图片与相册方向不符的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 小米手机上传图片与相册方向不符的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是Android系统Exif方向信息的常见问题。当使用相机拍摄的照片包含方向元数据时，部分小米机型在读取时未能正确解析方向标记，导致图片显示方向错误。

解决方案：

  1. 使用uni.chooseImage替代plus.gallery.pick
uni.chooseImage({
  count: 9,
  sourceType: ['album'],
  success: (res) => {
    uni.previewImage({
      urls: res.tempFilePaths
    })
  }
})
  1. 添加图片方向校正处理
uni.chooseImage({
  success: (res) => {
    // 对每个图片文件进行方向校正
    res.tempFilePaths.forEach(filePath => {
      // 使用exif.js获取方向信息并校正
      this.correctImageOrientation(filePath)
    })
  }
})
  1. 云端打包配置优化 在manifest.json中配置相机参数：
"app-plus": {
  "modules": {
    "Image": {
      "correctOrientation": true
    }
  }
}
回到顶部