Xamarin forms: jamesmontemagno/MediaPlugin: Selected picture is rotating when added to UI in IOS app

Question

I followed this blog for taking photos from the gallery and camera. But the selected picture is showing in right rotated form when it comes to the UI in IOS. Problem only occurs when using the camera and I have no issues with the gallery. This feature is working fine in android and UWP.

Screenshot added below:

Code of Camera:

async void CameraClick()
        {
            try
            {
                await CrossMedia.Current.Initialize();
                if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
                {
                    await DisplayAlert("Camera", "No camera available.", "OK");
                    return;
                }
                _mediaFile = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
                {
                    Directory = "Sample",
                    Name = "test.jpg",
                    AllowCropping = true
                });
                if (_mediaFile == null)
                    return;
                profileImage.Source = ImageSource.FromStream(() =>
                {
                    isPicture = true;
                    return _mediaFile.GetStream();
                });
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine("Exception:>" + ex);
            }
        }

Device : IOS SE

Version of the media plugin: 3.1.1

Control I am using to display the image : Xam.plugins.Forms.Imagecircle 2.0.2(For android and UWP I am using 1.8.1)

Gallery pictures are working fine and the issue is only when taking pictures using the camera. No issues in android and UWP part.

Answer 1

Cause:

This is a common experience even outside of Xamarin . It is caused by iOS .

A UIImage has a property imageOrientation , which instructs the UIImageView and other UIImage consumers to rotate the raw image data. There's a good chance that this flag is being saved to the exif data in the uploaded jpeg image, but the program you use to view it is not honoring that flag.

Solution:

In the Issues part in jamesmontemagno/MediaPlugin in Github, there are several issues like the problem you meet. Seems using GetStreamWithImageRotatedForExternalStorage will fix this issue.

You can refer to: https://github.com/jamesmontemagno/MediaPlugin/issues/333

In another way, you can rotate the image yourself.

Here are some links that might help you:

iOS Image Orientation has Strange Behavior

iOS UIImagePickerController result image orientation after upload

iOS: Image get rotated 90 degree after saved as PNG representation data

Answer 2

I faced this problem in the last few months on iOS. The solution for this is add one more line in your code that is:- SaveMetaData = false,

async void CameraClick()
        {
            try
            {
                await CrossMedia.Current.Initialize();
                if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
                {
                    await DisplayAlert("Camera", "No camera available.", "OK");
                    return;
                }
                _mediaFile = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
                {
                    Directory = "Sample",
                    Name = "test.jpg",
                    AllowCropping = true,
                    SaveMetaData = false
                });
                if (_mediaFile == null)
                    return;
                profileImage.Source = ImageSource.FromStream(() =>
                {
                    isPicture = true;
                    return _mediaFile.GetStream();
                });
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine("Exception:>" + ex);
            }
        }