Image taking with the camera is crooked

KhosrouKhosrou Member ✭✭✭

hi guys,

Im using Xam.Plugin.Media camera to take a photo, but when I take the photo and added into an object then suddenly it is crooked, it turns it down.

Any idea what can be the problem here?

Best Answer

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    An unsteady camera hand???

    But without your code and samples of the actual photos before and after this supposed tilt, there's not much anyone can example to help you out.

  • KhosrouKhosrou Member ✭✭✭

    @ClintStLaurent sorry, here is the code

            private async void TakePhoto(object sender)
                    {
                        var foto = sender as CostumImage;
                        if (foto == null) return;
    
                        var mediaService = AppContainer.Container.Resolve<IMediaService>();
                        if (!await mediaService.CanTakePhoto()) return;
    
                        var item = CreateNewPictureItem(foto.ImageIndex);
    
                        var mediaFile = await mediaService.TakePhotoAsync(new StoreCameraMediaOptions
                        {
                            Directory = "Kitchen",
                            Name = $"RoomImage{item.ID}.jpg"
                        });
    
                        if (mediaFile == null) return;
    
    
    
                        item.ImageAsBytes = GetImageSourceFromMediaFile(mediaFile);
    
                        foto.Source = ImageSource.FromStream(() => new MemoryStream(item.ImageAsBytes));
                        _fotoViewModel.AddImage(item);
                    }
    
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    You say the image is 'crooked'. Compared to what? Maybe you're just shooting a crooked photo.
    If it was being rotated the final photo would either be cropped, or have blank white space if the photo was enlarged to accommodate the rotated content.

  • KhosrouKhosrou Member ✭✭✭
    edited September 2018

    @ClintStLaurent I mean rotated exactly, I've used the wrong word, how can I fix it? here is the screenshot

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
    edited September 2018

    Are you saying its partly rotated... Or fully 90° rotated?
    If its 90° that's probably right. The metadata of the image records the orientation when photographed. There is tag for rotation. Its something like 1=none, 2=right, 3-left, 4=upsidedown or something to that effect: I don't recall them off the top of my head. So depending on what is recorded (could be right could be wrong, could be nothing is recorded) and whether or not your photo display software is looking for that tag and honoring it by re-rotating for display... then you could get rotated images.

    In other words... They aren't magic. Software has to both write the metadata tags when saving the image, and read the tags and take action when displaying the image.

    https://www.howtogeek.com/254830/why-your-photos-dont-always-appear-correctly-rotated/

  • KhosrouKhosrou Member ✭✭✭

    @ClintStLaurent so how do I fix this?

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    You have to make sure you're writing the EXIF data from the photo being captured.
    You have to read the EXIF data when you read the image and rotate accordingly.
    For example: If the image was rotated right 90° when taken, then you have to rotate left 90° when you display.

  • KhosrouKhosrou Member ✭✭✭

    @ClientStLaurent I really dont have any idea how to do that, do you have an example for me please?

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    There is lots and lots of C# on the next for dealing with JPG's. Its been done for years in Windows. And in this case Csharp is CSharp whether its in Windows or Xamarin.

    At least make an effort to do some research on it and try to write an implementation. That's how you learn. Saying "I don't know how" doesn't really cut it since nobody knows anything until they take the time and effort to research and learn.

    You should be able to locate some examples of doing this in WPF and even WindowsForms apps over the last 15 years - then adapt it to the Xamarin solution.

  • KhosrouKhosrou Member ✭✭✭

    @ClintStLaurent Im already doing it, its weird because at first it worked perfectly.

  • NMackayNMackay GBInsider, University mod
    edited September 2018

    We're seeing a similar issue with TakePhotoAsync but only in iOS iPad devices, it's been looked into, I'm not assigned that PR.

    I'll report back if we find a solution.

  • KhosrouKhosrou Member ✭✭✭

    @NMackay thanks that would be great!

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
    edited September 2018

    So are the both of you saying...

    Code that worked fine previously has suddenly started behaving differently after an update to either Xamarin Forms or the photography nuget

    ?

  • NMackayNMackay GBInsider, University mod

    I never spotted this issue before TBH, one of our customers did. Just to confirm it affects iPhone and iPad.

    Same code and test conditions work fine for Android. There are a few open issues regarding the mediapluggin and image rotation in iOS

    https://github.com/jamesmontemagno/MediaPlugin/issues/554

    As I say, I'm not looking at this particular issue at the moment but happy to report if we find a solution.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    cc: @NMackay

    Interesting. I've always noticed that my iPhone over USB shows previews without re-orienting yet new previews are created by windows just by copying the images over. I didn't realize the issue was more widespread.

    (Yesterday was "Wild West Wednesday" at work.)

  • MatthewRMatthewR USMember ✭✭
    edited September 2018

    @Khosrou I noticed you are using the media plugin. I know that MediaFiles have an extension .GetStreamWithImageRotatedForExternalStorage() maybe that will fix your issue?

    public static byte[] GetBytes(this MediaFile file)
    {
        Stream GetStream() => file.GetStreamWithImageRotatedForExternalStorage();
        return GetBytes(GetStream());
    }
    
    private static byte[] GetBytes(Stream stream)
    {
        using (var ms = new MemoryStream())
        {
            stream.CopyTo(ms);
            return ms.ToArray();
        }
    }
    
  • NMackayNMackay GBInsider, University mod

    @MatthewR said:
    @Khosrou I noticed you are using the media plugin. I know that MediaFiles have an extension .GetStreamWithImageRotatedForExternalStorage() maybe that will fix your issue?

    public static byte[] GetBytes(this MediaFile file)
    {
      Stream GetStream() => file.GetStreamWithImageRotatedForExternalStorage();
      return GetBytes(GetStream());
    }
    
    private static byte[] GetBytes(Stream stream)
    {
      using (var ms = new MemoryStream())
      {
          stream.CopyTo(ms);
          return ms.ToArray();
      }
    }
    

    It has to be fulling tested but this seems to have done the trick for us.

    Thanks for sharing.

  • KhosrouKhosrou Member ✭✭✭

    @NMackay how can I apply that to my code? I'm a little but confused...( im an amateur )

  • KhosrouKhosrou Member ✭✭✭

    @NMackay It works! Thank you so much man! I appreciate it

Sign In or Register to comment.