使用react-native-compressor压缩图片时竖图转横图问题

使用react-native-compressor的手动压缩模式处理竖版图片时，出现压缩后图片变为横版的问题，这是因为压缩过程中忽略了图片的EXIF方向元数据，导致图片按照原始像素矩阵方向显示，而非拍摄时的竖版方向。以下是具体解决步骤：

方法一：通过EXIF信息手动旋转图片 #

1. 安装依赖库
   首先安装用于获取EXIF信息的react-native-exif和用于图片旋转的@react-native-community/image-manipulator：

   npm install react-native-exif @react-native-community/image-manipulator --save
   

2. 实现压缩+旋转逻辑

   import COM from 'react-native-compressor';
   import Exif from 'react-native-exif';
   import ImageManipulator from '@react-native-community/image-manipulator';
   
   const compressVerticalImage = async (imageUri) => {
     // 获取图片的EXIF方向信息
     const exifData = await Exif.getExif(imageUri);
     const orientation = exifData.Orientation;
   
     // 执行压缩
     const compressedResult = await COM.compress(imageUri, {
       compressionMethod: 'manual',
       maxWidth: 3000,
       quality: 0.9,
     });
   
     // 根据EXIF方向旋转图片
     let finalImage = compressedResult;
     if (orientation) {
       const rotationAngle = getRotationAngle(orientation);
       finalImage = await ImageManipulator.manipulateAsync(
         compressedResult.path,
         [{ rotate: rotationAngle }],
         { format: 'jpeg', quality: 0.9 }
       );
     }
   
     return finalImage;
   };
   
   // 映射EXIF方向到旋转角度
   function getRotationAngle(orientation) {
     switch (orientation) {
       case 2: return -180;
       case 3: return 180;
       case 4: return -180;
       case 5: return -90;
       case 6: return 90;
       case 7: return 90;
       case 8: return -90;
       default: return 0;
     }
   }
   

方法二：检查库自带的方向保留配置 #

部分版本的react-native-compressor支持keepOrientation参数，可直接开启以保留图片方向：

const result = await COM.compress(image.uri, {
  compressionMethod: 'manual',
  maxWidth: 3000,
  quality: 0.9,
  keepOrientation: true
});

如果该参数不存在，建议优先使用方法一解决问题。

内容的提问来源于stack exchange，提问作者Ali Mohsen