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 sav

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>