0

I'm working on a function that takes a photo and convert it to base64 string. But for some reason, and i tried looking this up, Convert.ToBase64String always rotate my image 90 degrees counter clockwise. I have tried looking this up but couldnt find anyone with similair issue. Here's the code

    private async Task<string> GetPhotoBase64StringAsync(int compressionQuality = 50, PhotoSize photoSize = PhotoSize.Medium)
    {
        string filename = $"{DateTime.Now.ToString("MMddyyyy_Hmmtt")}.jpg";

        var photo = await UtilityService.OpenCameraAsync(filename, compressionQuality, photoSize);

        if (photo != null)
        {
            var bytes = await photo.GetStream().ConvertToBytes();
            var base64string = Convert.ToBase64String(bytes);
            return base64string
        }
        return string.Empty;
    }

photo is an object that is returned by the xamarin plugin that im using. I know for a fact that the plugin returns the image in the right orientation because i displayed afterward and its not rotated.

The problem happens when i convert the image to stream and from stream to base64. If i put a breakpoint at return base64string and copy and paste the base64 string to an online base64 to image convert, the image would come out rotated 90 degrees counter clockwise.

I have also tried var base64string = bytes.ToBase64String(); but that didnt work either.

This is so strange and i have never countered this before.

Vibol
  • 615
  • 1
  • 8
  • 25
  • 5
    I don't think base64 has anything to do with this. Most likely you're either losing the EXIF data when getting the byte[] data for the image, OR the viewer that you're using doesn't respect the EXIF orientation data. Look at the github repo for the plugin, there are a LOT of issues related to image orientation – Jason Mar 25 '19 at 14:33
  • @Jason is right. The problem is not in Base64. If image appears rotated, you either need to handle Exif data manually or use a viewer that does it for you. It depends on what you're trying to do. For example, on Android, you can use Glide. – rubo Mar 25 '19 at 22:14
  • Are you using MediaPlugin to take photos? If yes, try to set `AllowCropping` to true when taking photos.Have a look at this [thread](https://stackoverflow.com/questions/54672643/xamarin-forms-camera-picture-is-left-rotated-when-comes-to-ui-in-ios) to see if it helps. – nevermore Mar 26 '19 at 07:03
  • @Jason is right. i was looking at the wrong place. @JackHua-MSFT correct that is what i use. I had to use `GetStreamWithImageRotatedForExternalStorage()` instead of `GetStream()` – Vibol Mar 26 '19 at 13:21

2 Answers2

0

Have you tried the good old IO.MemoryStream instead of .ConvertToBytes()?

            byte[] bytes;
            using (var memoryStream = new System.IO.MemoryStream())
            {
                photo.GetStream().CopyTo(memoryStream);
                bytes = memoryStream.ToArray();
            }
TosT
  • 43
  • 5
0

the problem was with the plugin. I'm using MediaPlugin and had to use the other getstream method

var bytes = await photo.GetStreamWithImageRotatedForExternalStorage().ConvertToBytes();
var base64string = Convert.ToBase64String(bytes);
return base64string
Vibol
  • 615
  • 1
  • 8
  • 25