[CameraRoll] Image Orientation Bug

[myusuf3]

This is blocking bug for us. I have seen a couple of issues and followed the suggest tips but I am still unable to get this image to render with proper orientation. This issue #1567 make reference to the bug and memory issues large camera rolls.

Here is an example of what I am talking about as you can see top image is rotated incorrectly. Doesn't happen with all images though oddly enough.

[myusuf3]

@a2 ping

[myusuf3]

@brentvatne ping

[brentvatne]

@myusuf3 - I'm not familiar with this part of the codebase, it sucks that it's a blocking issue for you :( perhaps @nicklockwood has some insight

[myusuf3]

That would be awesome @nicklockwood if you could provide some insight!

[nicklockwood]

I don't have time to investigate this fully right now, however I have a theory about what the issue is.

UIImage has a concept of orientation which may be being ignored when the image is drawn.

The orientation metadata means that images in the camera roll aren't necessarily stored "right-way-up" on disk, but are instead rotated to the correct angle when drawn by iOS. If we're not taking the orientation into account, it would explain why some images are rotated and others aren't.

[VonD]

@myusuf3 does the orientation appear differently on your thumbnails than it does on the Apple Photos app ?

[ide]

Some reading on orientation for those interested: http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/

[VonD]

@ide thanks for the article. nice read!

[myusuf3]

@VonD yes it does appear differently in both places. correct in the photos app and broken in our react application.

[VonD]

@myusuf3 OK, here's a little experiment : a photo of my keyboard taken in the 4 orientations. Below are two screenshots : on the top the Photos app, on the bottom my RN app. The orientations seem consistent. I'm using RN 0.6.0 + the patch provided here : #1567 , and the screenshots are from a device with ios 8.3. How does this test work for you ?

[myusuf3]

Is this the patch exactly? Just so we are clear.

  if ([imageTag hasPrefix:@"assets-library"]) {
    [[RCTImageLoader assetsLibrary] assetForURL:[NSURL URLWithString:imageTag] resultBlock:^(ALAsset *asset) {
      if (asset) {
        // ALAssetLibrary API is async and will be multi-threaded. Loading a few full
        // resolution images at once will spike the memory up to store the image data,
        // and might trigger memory warnings and/or OOM crashes.
        // To improve this, process the loaded asset in a serial queue.
        dispatch_async(RCTImageLoaderQueue(), ^{
          // Also make sure the image is released immediately after it's used so it
          // doesn't spike the memory up during the process.
          @autoreleasepool {
            ALAssetRepresentation *representation = [asset defaultRepresentation];
            ALAssetOrientation orientation = [representation orientation];
            UIImage *image = [UIImage imageWithCGImage:[asset thumbnail] scale:1.0f orientation:UIImageOrientationUp];
            RCTDispatchCallbackOnMainQueue(callback, nil, image);
          }
        });

This to me doesn't make sense since you are forcing all the images in the up orientation which should result in everything that wasn't take in up orientation to be broken.

[myusuf3]

@VonD ^^^ If so that doesn't solve the issue for me.

[a2]

@myusuf3 I mean I can't say for certain that will work. It was just a thought. My thought was that the -thumbnail method is documented as performing the rotation for you and having an Up image orientation.

[myusuf3]

So if I apply thumbnail [asset thumbnail] it will put everything in the up position once its done? @a2 Anyways I got that piece working and things in the application aren't flipped anymore. I was using a custom Image component in the camera roll screen. I will fix my PR #1842 to reflect it.