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.

You may want to update your question the the specific device you're using, the version of the media plugin, and the control you are using to display the image. It's possible the image has embedded rotation metadata that isn't being respected by the image control. — Ben Reierson, Nov 24 '18 at 11:17
@BenReierson updated the question with the requested details — Sreejith Sree, Nov 24 '18 at 11:28
I'm not seeing this issue with my app using the same plugin, but you might try ffcachedimage (https://github.com/luberda-molinet/FFImageLoading) to see if that displays it correctly. It has a circle image transform you can use to replicate the ImageCircle control, if needed. — Ben Reierson, Nov 24 '18 at 11:40
@BenReierson I am using the simulator provided by Visual Studio, the camera is not working on that simulator. Is there any other way to test the camera feature in the simulator? — Sreejith Sree, Nov 24 '18 at 11:56
I've seen the same issue with the simulator for taking pictures, I always use a real device for that. — Ben Reierson, Nov 24 '18 at 12:45
@BenReierson still I didn't run on to real device, what are the formalities to run an app to a real device? Can you ping any url here. — Sreejith Sree, Nov 24 '18 at 13:38

score 3 · Accepted Answer · answered Nov 26 '18 at 07:26

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

score 1 · Answer 2 · edited Apr 30 '20 at 13:44

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);
            }
        }

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

2 Answers2

Linked