Incorrect image orientation using MediaPicker CapturePhoto on iOS

Description

When using MediaPicker.Default.CapturePhotoAsync() on iOS, the image data from FileResult.OpenReadAsync() gets converted to PNG format with no orientation flag to correctly display the final result.

Many smartphones capture photos using one consistent orientation, and then set the orientation using a flag in the EXIF metadata for the image. This is usually not a problem if the orientation flag is allowed to remain inside the image. Unfortunately, when the PNG conversion occurs with CapturePhotoAsync(), the resulting image data does not contain any orientation flag to properly rotate the photo.

There are two ways to fix this:

1. Provide the orientation flag within the PNG data
2. Perform the correct image rotate+flip internally before returning PNG data without an orientation flag

Option 1 would probably be the quickest way to fix this and require less processing time.

Steps to Reproduce

Just set up a quick Maui project with a button and an image view. Use MediaPicker.CapturePhoto to take a photo with an iOS device (might need to try different device rotations/orientations). Set the “Source” property of the image to the file result. Code for button click handler method body is below:

var photo = await MediaPicker.Default.CapturePhotoAsync();
var stream = await photo.OpenReadAsync();
var img = ImageSource.FromStream(() => { return stream; });
imgTest.Source = img;

Version with bug

.NET 6.0.400-preview.22330.6

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

15.6

Did you find any workaround?

The only workaround is to take the photo outside the app, then use MediaPicker.Default.PickPhotoAsync() to choose the file (no PNG conversion happens that way).

Relevant log output

No response

[ianpowell2017]

I am having the same problem. It baffles me why this has been moved to the backlog when it is a serious problem. There is currently no feasible work around

[angelru]

With Xamarin Forms I solved it this way.

Android:

public class PhotoPickerService : IPhotoPickerService
    {
        public async Task<byte[]> ResizeImageAsync(string path)
        {
            try
            {
                var exif = new Android.Media.ExifInterface(path);
                string orientation = exif.GetAttribute(Android.Media.ExifInterface.TagOrientation);

                //Get the bitmap.
                var originalImage = BitmapFactory.DecodeFile(path);

                //Set imageSize and imageCompression parameters.
                var imageSize = .40;
                var imageCompression = 45;

                //Resize it and then compress it to Jpeg.
                var width = originalImage.Width * imageSize;
                var height = originalImage.Height * imageSize;
                var scaledImage = Bitmap.CreateScaledBitmap(originalImage, (int)width, (int)height, true);

                var matrix = new Matrix();

                switch (orientation)
                {
                    case "1": // landscape
                        break;
                    case "3":
                        matrix.PreRotate(180);
                        scaledImage = Bitmap.CreateBitmap(scaledImage, 0, 0, scaledImage.Width, scaledImage.Height, matrix, true);
                        matrix.Dispose();
                        matrix = null;
                        break;
                    case "4":
                        matrix.PreRotate(180);
                        scaledImage = Bitmap.CreateBitmap(scaledImage, 0, 0, scaledImage.Width, scaledImage.Height, matrix, true);
                        matrix.Dispose();
                        matrix = null;
                        break;
                    case "5":
                        matrix.PreRotate(90);
                        scaledImage = Bitmap.CreateBitmap(scaledImage, 0, 0, scaledImage.Width, scaledImage.Height, matrix, true);
                        matrix.Dispose();
                        matrix = null;
                        break;
                    case "6": // portrait
                        matrix.PreRotate(90);
                        scaledImage = Bitmap.CreateBitmap(scaledImage, 0, 0, scaledImage.Width, scaledImage.Height, matrix, true);
                        matrix.Dispose();
                        matrix = null;
                        break;
                    case "7":
                        matrix.PreRotate(-90);
                        scaledImage = Bitmap.CreateBitmap(scaledImage, 0, 0, scaledImage.Width, scaledImage.Height, matrix, true);
                        matrix.Dispose();
                        matrix = null;
                        break;
                    case "8":
                        matrix.PreRotate(-90);
                        scaledImage = Bitmap.CreateBitmap(scaledImage, 0, 0, scaledImage.Width, scaledImage.Height, matrix, true);
                        matrix.Dispose();
                        matrix = null;
                        break;
                }

                byte[] imageBytes;

                using (MemoryStream ms = new MemoryStream())
                {
                    scaledImage.Compress(Bitmap.CompressFormat.Jpeg, imageCompression, ms);
                    imageBytes = ms.ToArray();
                    await File.WriteAllBytesAsync(path, imageBytes);
                }

                originalImage.Recycle();
                scaledImage.Recycle();
                originalImage.Dispose();
                scaledImage.Dispose();

                return imageBytes;
            }

            catch (IOException ex)
            {
                _ = ex.Message;
                return null;
            }
        }
    }

iOS:

  public class PhotoPickerService : IPhotoPickerService
    {
        public async Task<byte[]> ResizeImageAsync(string path)
        {
            try
            {
                UIImage originalImage = UIImage.FromFile(path);
                var resizedImage = MaxResizeImage(originalImage, 1920f, 1080f);
                NSData imgData = resizedImage.AsJPEG(0.46f);
                byte[] imageByte = imgData.ToArray();
                if (imgData.Save(path, NSDataWritingOptions.Atomic, out NSError err))
                {
                    //Dispose of objects.
                    originalImage.Dispose();
                    resizedImage.Dispose();
                    imgData.Dispose();
                    await Task.FromResult(imageByte);
                }
            }

            catch (Exception ex)
            {
                _ = ex.Message;
            }

            return null;
        }

        private UIImage MaxResizeImage(UIImage sourceImage, float maxWidth, float maxHeight)
        {
            var sourceSize = sourceImage.Size;
            var maxResizeFactor = Math.Max(maxWidth / sourceSize.Width, maxHeight / sourceSize.Height);
            if (maxResizeFactor > 1) return sourceImage;
            var width = maxResizeFactor * sourceSize.Width;
            var height = maxResizeFactor * sourceSize.Height;
            UIGraphics.BeginImageContext(new System.Drawing.SizeF((float)width, (float)height));
            sourceImage.Draw(new System.Drawing.RectangleF(0, 0, (float)width, (float)height));
            var resultImage = UIGraphics.GetImageFromCurrentImageContext();
            UIGraphics.EndImageContext();
            return resultImage;
        }
    }