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?

You should rotate the image yourself. If you pass the `imagepath` to the list, you have to rotate the image before the image has been set to its parent view(This means you need to change the source code of `FlowListView`). — nevermore, Feb 14 '19 at 05:22
@JackHua-MSFT So before showing the image in flowlistview need to add rotation? I will try that, Do you know how to do that? — Sreejith Sree, Feb 14 '19 at 05:27
@JackHua-MSFT ok, meanwhile I also try to find the solution. — Sreejith Sree, Feb 14 '19 at 05:31
@JackHua-MSFT Found image have `Rotation` property. But I have this problem only with ios camera. So how can I apply this to ios camera only? — Sreejith Sree, Feb 14 '19 at 06:16
@JackHua-MSFT I named image in xaml as `x:Name="upload_image"`, but in xaml.cs file it is not accessable? — Sreejith Sree, Feb 14 '19 at 06:17
1. Try `if (Device.RuntimePlatform == Device.iOS)`. 2. Have you save your `xaml` file(Ctrl+s and try again)? — nevermore, Feb 14 '19 at 06:29
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/188380/discussion-between-sreejith-sree-and-jack-hua-msft). — Sreejith Sree, Feb 14 '19 at 06:31

nevermore · Accepted Answer · 2019-02-19T09:16:36.073

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>

GetStreamWithImageRotatedForExternalStorage() was the key for me — stepheaw, Nov 25 '19 at 00:16

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

1 Answers1

Linked