Camera plugin: captured picture orientation wrong

1,899 views
Skip to first unread message

Michael Tawiah Sowah

unread,
May 23, 2018, 12:02:42 PM5/23/18
to Flutter Dev
I am using the camera plugin and after taking the picture, I convert to base64 and send to my servers but when previewed on my server the image on the server comes 90 degrees clockwise rotated, so instead of portrait image of my face I get landscape image of my face. how do I fix this?

Eric Seidel

unread,
May 23, 2018, 12:04:33 PM5/23/18
to Michael Tawiah Sowah, Flutter Dev
Likely related to EXIF data being respected on the phone during display but then lost when sent to the sever?

On Wed, May 23, 2018 at 9:02 AM Michael Tawiah Sowah <michael...@gmail.com> wrote:
I am using the camera plugin and after taking the picture, I convert to base64 and send to my servers but when previewed on my server the image on the server comes 90 degrees clockwise rotated, so instead of portrait image of my face I get landscape image of my face. how do I fix this?

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Ash Simmonds

unread,
May 23, 2018, 12:10:47 PM5/23/18
to Flutter Dev
Yeah I asked about this a couple months ago, it's not really supported yet.

In the mean time you'll have to do your own calcs and set rotation etc based on x/y of input.

Michael Tawiah Sowah

unread,
May 23, 2018, 12:16:08 PM5/23/18
to Flutter Dev
@eseidel is there a workaround for this? how do I fix it need it to complete a production app?

@Ash Simmonds any Ideas or sample solutions would be appreciated.

Eric Seidel

unread,
May 23, 2018, 12:52:42 PM5/23/18
to Michael Tawiah Sowah, Flutter Dev
EXIF is confusing and has long been a source of bugs for image viewing/encoding across many platforms/implementations. :)  (Web browsers had EXIF orientation bugs for years.)   Here is one explanation:

These days cameras always write the bytes of the image in the same orientation, regardless of how the phone was held.  The camera records the orientation the phone was held (in the EXIF metadata) and then many (but not all) image viewers respect that EXIF orientation data when displaying the image so that the image is then displayed in the same orientation the camera was held at.

I believe Flutter respects EXIF (we had a bug on that a while back). :)

But when handling the image data, it's important to be careful to maintain that EXIF data.  Without knowing more about your setup, there are all kinds of things I could imagine going wring (some of which may be flutter's fault).

1.  How are you base64-encoding the image?  Is that including the image in a format which includes EXIF data (e.g. png, jpg?) or through that encoding are you losing that orientation data?  (Does Flutter provide you the right means of access such that you *could* encode the image with the exif data when sending?)

2.  Are whatever viewers your using on the server properly respecting the EXIF data?

In any case, I recommend reading more about EXIF and investigating.  Won't really be possible for me to debug via email. :)

It's also possible this isn't related to EXIF at all, but that's my guess from what you've said so far.

Best of luck!

Eric

On Wed, May 23, 2018 at 9:02 AM Michael Tawiah Sowah <michael...@gmail.com> wrote:
I am using the camera plugin and after taking the picture, I convert to base64 and send to my servers but when previewed on my server the image on the server comes 90 degrees clockwise rotated, so instead of portrait image of my face I get landscape image of my face. how do I fix this?

Michael Tawiah Sowah

unread,
May 23, 2018, 2:49:22 PM5/23/18
to Flutter Dev
Hi, I really need this to complete this product...and its currently the only block...any help here is appreciated...lost of ideas

imageFile = new File(widget.previewImagePath);
imageBytes = imageFile.readAsBytesSync();
visitorImage = base64.encode(imageBytes);

https://github.com/flutter/flutter/issues/10533

Michael Thomsen

unread,
May 23, 2018, 3:26:04 PM5/23/18
to Michael Tawiah Sowah, Flutter Dev
What are you doing on the server?

From this, it looks like the camera plugin is orientation aware.

Michael Tawiah Sowah

unread,
May 23, 2018, 3:42:27 PM5/23/18
to Flutter Dev
@Michael Thomsen on the server I save the base64 data image as a jpeg and then display it on a web page.

yes the camera plugin is orientation aware but the exif orientation data is lost at some point and that's why the images on my server display  rotated 90 degrees to the left

Divyank Vijay

unread,
Jun 5, 2019, 3:43:00 AM6/5/19
to Flutter Development (flutter-dev)
I am also facing the exactly same issue image get rotated while uploading at server. Is there any way around for this?
Reply all
Reply to author
Forward
0 new messages