uni-app 图片横屏时 uni.previewImage 显示问题

uni-app 图片横屏时 uni.previewImage 显示问题

测试过的手机

小米10拍摄的图片，预览时会变成横屏（旋转9度）

示例代码

uni.previewImage

操作步骤

使用小米10拍的图片，预览时图片变成横屏

预期结果

使用小米10拍的图片，预览时图片变成横屏

实际结果

使用小米10拍的图片，预览时图片变成横屏

bug描述

小米10等手机拍摄的图片，预览时会变成横屏（旋转9度）



| 信息项           | 内容               |
|------------------|--------------------|
| 产品分类         | uniapp/App         |
| PC开发环境操作系统 | Windows            |
| PC开发环境操作系统版本号 | win10              |
| HBuilderX类型    | 正式               |
| HBuilderX版本号  | 3.1.22             |
| 手机系统         | 全部               |
| 手机厂商         | 华为               |
| 页面类型         | vue                |
| 打包方式         | 云端               |
| 项目创建方式     | HBuilderX          |

更多关于uni-app 图片横屏时 uni.previewImage 显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 图片横屏时 uni.previewImage 显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的EXIF方向信息解析问题。小米10等手机拍摄的图片在EXIF数据中记录了方向信息，但uni.previewImage在解析时未能正确处理这些方向标记，导致图片显示时发生旋转。

解决方案：

  1. 使用图片处理插件：在预览前通过uni-app插件市场的图片处理插件（如image-tools）读取并修正图片方向。

  2. 服务端预处理：上传图片时在服务端处理EXIF方向信息，返回修正后的图片用于预览。

  3. 自定义预览组件：开发自定义图片预览组件，集成exif-js库检测方向并应用CSS旋转。

  4. 临时规避方案：通过uni.chooseImage选择图片时，设置sizeType为压缩格式，可能规避此问题。

推荐实现代码：

// 使用exif-js检测方向
import EXIF from 'exif-js';

function correctImageOrientation(filePath) {
  return new Promise((resolve) => {
    EXIF.getData(filePath, function() {
      const orientation = EXIF.getTag(this, 'Orientation');
      // 根据orientation值应用CSS旋转
      resolve(orientation);
    });
  });
}
回到顶部