Xamarin Forms: Camera picture is left rotated when comes to UI in IOS

Question

The picture taken from the IOS camera is left rotated when showing it in the UI.

I already faced this type of issue and solved by this thread . But in this case, I am saving only the image path to List.

Camera code:

public async void OpenMyCamera()
        {
            try
            {
                List<string> images = new List<string>();
                await CrossMedia.Current.Initialize();

                if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
                {
                    await DisplayAlert("Alert", "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;

                //Saving only the path to list.
                images.Add(_mediaFile.Path);

                MessagingCenter.Send<App, List<string>>((App)Xamarin.Forms.Application.Current, "ImagesSelected", images);

            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine("Exception:>" + ex);
            }
        }

I am using FlowListView for showing the pictures using the following code.

MessagingCenter.Subscribe<App, List<string>>((App)Xamarin.Forms.Application.Current, "ImagesSelected", (s, images) =>
                {
                    for (int i = 0; i < images.Count; i++)
                    {
                        _images.Add(images[i]);
                        _images = new ObservableCollection<string>(_images.Distinct());
                        listItems.FlowItemsSource = _images;
                    }
                });
            }

What is the solution for this issue?

Answer 1

Solution:

Update:

This issue has been solved here .

And there are also discussions on MediaPlugin 's GitHub

It seems this is a known issue when you set AllowCropping to true, check the image's exif data you will find the edited image has been rotated by 90 degrees. If you haven't used the image's metadata , try to close it to fix that:

var _mediaFile = await Plugin.Media.CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
{
    Directory = "Sample",
    Name = "test.jpg",
    AllowCropping = true,
    SaveMetaData = false
});

Previous answers

Let's say you get a MediaFile after take photo:

MediaFile file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
            {
                Directory = "Sample",
                Name = "test.jpg"
            });

Then transfer MediaFile into a imageSource :

Using GetStreamWithImageRotatedForExternalStorage will help you to solve the problem of image is rotated after taken photo in iOS.

ImageSource source = ImageSource.FromStream(() =>
            {
                return file.GetStreamWithImageRotatedForExternalStorage();
            });

Then add this source to your imageSource list:

imageSourceList.Add(source);

Assume there is a model with one property source:

public class myModel
    {
        public ImageSource source { get; set; }
    }

At last, you can create a list of myModel , set the images as FlowItemsSource , take as an example(assume there are 3 photos):

 var images = new List<myModel>();
 var a = new myModel {source = imageSourceList(0) };
 var b = new myModel {source = imageSourceList(1) };
 var c = new myModel {source = imageSourceList(2) };

 images.Add(a);
 images.Add(b);
 images.Add(c);

 myList.FlowItemsSource = images;

In the xaml, binding soucre :

<flv:FlowListView FlowColumnCount="3" SeparatorVisibility="None" HasUnevenRows="false" x:Name="myList">

    <flv:FlowListView.FlowColumnTemplate>
        <DataTemplate>
            <Image Source="{Binding source}" />
        </DataTemplate>
    </flv:FlowListView.FlowColumnTemplate>

</flv:FlowListView>