Inconsistent handling of EXIF between Android and iOS

[MarioUnlam]

Environment

react: "17.0.2"
react-native: "0.66.3"
@react-native-community/image-editor: "^2.3.0",

Description

I'm working on an app that has a camera (using react-native-camera). The camera library creates rotated photos that include EXIF data with the correct orientation. Opening these photos in any viewer displays them correctly. However, I noticed an inconsistent behavior when trying to crop these photos using Image Editor.

On Android, the EXIF data seems to alter the cropping coordinates and dimensions. For example, a photo with EXIF orientation "6" will have the origin (0,0) at the top right corner, the x/width go from bottom to top, and the y/height go from left to right. A photo with EXIF orientation "8" has the origin at the bottom left corner, the x/width go from top to bottom, and the y/height go from right to left. Here's how each photo would look without the EXIF data:

On iOS, on the other hand, the origin is always at the top left corner, and the coordinates/dimensions are calculated correctly, regardless of the EXIF orientation (which is probably how everyone would expect it to work).

One workaround I found is to resize the image using another library, and remove the EXIF data. But this takes a couple seconds, making the camera much slower. Alternatively, I can calculate the coordinates and dimensions for Android, taking into account the EXIF orientation, but I'm not sure if this inconsistency is consistent in each platform, or if different devices of the same platform can have different behaviors.

[joshke]

We ran into this same issue, thank you for your details. What library are you using to resize and remove EXIF Data? I don't think it's consistent on each platform, because our Samsung S22 (Android 12) shows this problem whereas a POCO M3 (Android 11) works with no issues. I tried to rotate the image in the Java Source using the given EXIF information, it worked, but whenever I needed to zoom in on the image it was giving me the wrong area of the image.. Here is the code I have used to get the orientation..

public  int getOrientationDegree() {
      try {
        InputStream inputStream = openBitmapInputStream();
        @SuppressLint("NewApi") final ExifInterface exifInterface = new ExifInterface(inputStream);
        final int attributeInt = exifInterface.getAttributeInt(ExifInterface.TAG_ORIENTATION, ExifInterface.ORIENTATION_UNDEFINED);
        switch (attributeInt) {
          case ExifInterface.ORIENTATION_ROTATE_90:
            return 90;
          case ExifInterface.ORIENTATION_ROTATE_180:
            return 180;
          case ExifInterface.ORIENTATION_ROTATE_270:
            return 270;
        }
      } catch (IOException e) {
        e.printStackTrace();
      }
      return 0;
    }

  public static Bitmap rotateBitmap(Bitmap bitmap, int degree) {
      if (degree == 0 || bitmap == null) {
        return bitmap;
      }

      final Matrix matrix = new Matrix();
      matrix.setRotate(degree, bitmap.getWidth() / 2, bitmap.getHeight() / 2);
      return Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
    }

[MarioUnlam]

@joshke Some people suggested using react-native-image-resizer to create a copy of the image, without the EXIF, but in my tests this pretty much doubled the processing time of the image, which is barely acceptable. If this behavior is not consistent on each platform, that's a big problem. There's no way to tell if the image will be cropped correctly, in both cases the exif data is the same, but the library handles it differently.

[MarioUnlam]

@joshke I ended up switching to expo-image-manipulator, which allows me to resize, crop, rotate and flip images in a single function call, and it seems to take into account the EXIF data, even in my old Android phone (which had problems with react-native-image-editor). If your project is react-native-cli, with a few steps you can turn it into a "bare expo" project, allowing you to use expo libraries without changing the way you compile. I also had to add android:largeHeap="true" to my AndroidManifest.xml for it to work, as explained here: bamlab/react-native-image-resizer#235. Hope it helps.

[joshke]

@MarioUnlam thanks for the information on the library and great that you have a working solution for your problem. We trying to avoid Expo since this creates some big dependencies and gave us some issues with the most recent react native version in the past. For anyone else having this problem, I think I found a solution:
Read the rotation of the image with react-native-image-size in react native:

const {width, height, rotation} = await ImageSize.getSize(uri);

If there is a rotation, flip the passed height / width and offset.x/offset.y to ImageEditor

  offset = { x: offset.x, y: offset.y };
  size = { height: size.width, width: size.height }
  const cropData = { offset, size, displaySize: size };

  const croppedImageUri = await ImageEditor.cropImage(source.uri, cropData);