[camera, image_picker] Image is rotated after taking photo

[aleksvujic]

Steps to Reproduce

1. Clone the repository https://github.com/aleksvujic/CameraBug.
2. Run the application on Nexus 5X API 26, Android 8.0, x86_64.
3. Click on Select image.
4. Choose Use Camera (if running for the first time, it will ask you for permission).
5. Camera preview will show up. Preview is not rotated.
6. Take a photo. Image will be ROTATED!
7. Click check icon, image preview inside Image.file will be ROTATED as well!

NOTE: When choosing Use gallery, the selected image is not rotated. It only gets rotated when you use the camera.

It happens on iOS and Android.

Visual representation

[SvenSchoene]

I experience the same thing, however, I am using the camera-plugin itself, not the image_picker, so it's probably the camera-plugin...

[aleksvujic]

Camera plugin works for me on Android, but on iOS photo is still rotated... This bug is really annoying, you can't put an application into production with this kind of flaw.

[flower189]

I'm experiencing this issue as well, I'm sure it used to work correctly for box iOS and Android though.

Edit: I have noticed that the image orientation seems to be correct if the phone/emulator is rotated 90 degrees to the left when the image is taken.

[aleksvujic]

Can somebody from Google look at it? There are a lot of people who have problems.

[flower189]

Hi @aleksvujic

Out of interest, have you tested this on physical android devices? I can't seem to recreate it there, however on iOS an image taken vertically is displaying rotated 90 degrees in an Image widget.

As a workaround for this at the moment we're using the exif plugin to read the orientation information of the image and then using then flutter_compress_image plugin to rotate the image appropriately and remove the Exif data.

[aleksvujic]

If I take a photo using image_picker, it rotates an image on Android and iOS. If I use camera plugin, it works on Android (both emulator and physical), but rotates an image on iOS physical device.

Thank you for suggestion, I will try to use the plugins that you mentioned.

[SvenSchoene]

This plugin saved my life: https://pub.dev/packages/flutter_exif_rotation

Would be nice if this wouldn't be necessary. :(

[aleksvujic]

@SvenSchoene Unfortunately this plugin only works on Android. I am facing an issue with rotation on iOS as well.

[SvenSchoene]

DAMN! I was just going to implement this on iOS as well after I spent the past few days fixing stuff for the Android-side of our app.

Nooooooo! :( (images are also rotated for me on iOS.)

EDIT: Well, I don't know what I have changed, but currently, any picture and video I take on iOS is not rotated anymore. I thought that I was maybe wrong the first time, but I have at least one picture that is clearly rotated. Weird.

[aleksvujic]

Yes, same here... Camera is a core functionality of so many apps , yet it still doesn't work properly in Flutter. I hope Google engineers see this and fix it as soon as possible.

[aleksvujic]

@flower189 You said the following:

As a workaround for this at the moment we're using the exif plugin to read the orientation information of the image and then using then flutter_compress_image plugin to rotate the image appropriately and remove the Exif data.

Can you provide an example how to achieve this?

[flower189]

@aleksvujic I have just put together a quick example on a fork of your repo. Hope it helps! The image might still appear rotated in the emulator (it seems to have its own issues) but this seemed to fix it for any physical devices I tried it on.

https://github.com/flower189/CameraBug/tree/image-orientation

[mehmetf]

See #19458 (comment) .

This is actually a problem with the Image widget; not with the plugins.

[aleksvujic]

I find it strange that sometimes it works and sometimes it doesn't...

[kevin-haynie]

I'm having the same problem on iOS physical devices when I use the camera. It keeps flipping the images. This is really annoying and unnecessary. This needs to get fixed at the core level - not hacked up by all the users. This is core functionality.

[kmdinake]

@aleksvujic I have just put together a quick example on a fork of your repo. Hope it helps! The image might still appear rotated in the emulator (it seems to have its own issues) but this seemed to fix it for any physical devices I tried it on.

https://github.com/flower189/CameraBug/tree/image-orientation

@flower189 your solution worked out well for me on both iOS and Android

[chinmaygarde]

The incorrect application of EXIF information was a regression introduced in the engine on July 09, 2019 and patched/tested on July 17, 2019. However, the timeline of this issue (filed June 29, 2019) makes me think that this issue was not that OP was running into.

@matte5031 Mentioned in his comment that his image did contain an EXIF orientation value that was incorrect. Facebook also seems to strip EXIF information from images uploaded to the same. In fact, the test image added in the unit-test that checks that engine is respecting EXIF information shows up incorrectly on GitHub as well.

Given that the engine is respecting EXIF orientation information, I would like to make sure that the image itself contains the right rotation metadata. Can someone on this thread attach an image that is known to show up with the incorrect orientation. I can read the EXIF information myself and verify what is going on.

The following checklist would be good to follow to resolve this issue:

• Ensure that the invalid commit ranges I mentioned above are not in effect. Switching to the tip-of-tree should be fine.
• Capture a known buggy image from the device and ensure that the image itself has the correct orientation (dumped using a tool like exiftool), or, no orientation specific metadata.
• If the image has the correct orientation, then someone is applying a transformation at the widget layer. Figure out where and correct the same.
• If the image has an incorrect orientation, then we should teach to engine to optionally ignore EXIF orientation information to be bug for bug compatible with online services if necessary.

I also wonder if the camera uses accelerometer data to set this EXIF information. Just a thought.

[AbbasKMoussa]

any updates on this issue?

[lifenautjoe]

Anyone with a possible workaround here? You can't really have a user content app if all their images are being annoyingly rotated.

[orischwartz]

We use flutter_image_compress which corrects the image orientation. Something like this:

    ImagePicker.pickImage()
          ?.then((file) => file.readAsBytes())
          ?.then((bytes) => FlutterImageCompress.compressWithList(bytes))

[lifenautjoe]

Hi @orischwartz , I've tried your solution and people still report images being rotated.

We've had this bug for more than one year already 😢

    final imageBytes = await image.readAsBytes();
    await image.delete();
    final compressedImageBytes =
        await FlutterImageCompress.compressWithList(imageBytes);
    await image.writeAsBytes(compressedImageBytes);
    return image;

[HickYeah]

Any updates regarding this issue, please?

This issue is happening with me only on my current physical Samsung Note 9 device, works perfectly on the emulator,

We could have the same issue on most of the devices out there, I didn't test it yet on iOS.

Note, I tried to EXIF package to pull the orientation data off of the picture and i noticed it always pulls it as 0,

[Firman95]

This is what i did to correct the orientation using flutter_image_compress plugin. This code works for correcting orientation for plugin image_picker and multi_image_picker

File file = File(yourPath);
File compressedFile = await FlutterImageCompress.compressAndGetFile(file.absolute.path, file.absolute.path);

[SpiegelSoft]

Any updates regarding this issue, please?

This issue is happening with me only on my current physical Samsung Note 9 device, works perfectly on the emulator,

We could have the same issue on most of the devices out there, I didn't test it yet on iOS.

Note, I tried to EXIF package to pull the orientation data off of the picture and i noticed it always pulls it as 0,

Exactly the same thing is happening for me. This means that FlutterImageCompress can't help me, as it's got the wrong Exif value.

[lifenautjoe]

We’ve been using flutter for almost 1 year and a half. Unless someone creates another issue ( because apparently this one is no longer valid, even though wasn’t solved ) and gets some dozen upvotes, nothing will happen. I would advice opening another issue, regardless there’s no more information on the issue and posting it here to get there.

…

On Sun, 1 Dec 2019 at 12:54, Rob Lyndon ***@***.***> wrote: Any updates regarding this issue, please? This issue is happening with me *only on my current physical Samsung Note 9 device*, works perfectly on the emulator, We could have the same issue on most of the devices out there, I didn't test it yet on iOS. Note, I tried to EXIF package to pull the orientation data off of the picture and i noticed it always pulls it as 0, Exactly the same thing is happening for me. This means that FlutterImageCompress can't help me, as it's got the wrong Exif value. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#35334?email_source=notifications&email_token=ADBFXZKKHVSRYAYBQJXZBRLQWOQY3A5CNFSM4H4KWSN2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFRGWXI#issuecomment-560098141>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADBFXZIP4JC2DY2DRFFWXRDQWOQY3ANCNFSM4H4KWSNQ> .

[mehmetf]

While I understand the frustration, saying that clients report rotated images is not helpful. This is only a Flutter issue if the image contains the right orientation data but Flutter shows it incorrectly.

Some phone models are known to not generate the right orientation data right out of camera. I am guessing, inside their own camera app, they process the image based on sensor data and save it the right way up. In such cases, images right out of the camera will look wrong but images picked with image_picker should look right.

In other cases, some content sources (such as Facebook) might strip orientation data and/or use non-standard tags to process images.

In either case, Flutter cannot determine the image orientation. Facebook images might work in Facebook app but not anywhere else (see Chinmay's comment above). That does not mean everyone else is wrong. It just means Facebook is not doing things in a standard way.

I repeat:

If you find that image contains the right metadata but is not displayed correctly, please file a different issue.

In the meantime, a good way to solve this would be to attack it case by case. If your app heavily deals with Facebook images for instance, create a Dart library for handling their orientation and use it.

[KimHeeSeok]

In my case, there was no problem until image_picker version 0.6.2.
So, probably the original problem is different from mine, but the newer version '0.6.2+1' occurred the orientation problem.

[rlee1990]

How is this closed when this is a major issue who is managing this?

[gianlucainnocente]

I also have the orientation problem using 0.6.2+1 on Android.

[Mrfixedadmin]

Here is the ENTIRE code and the photo used in a VERY simple app i made following the google sanctioned appbrewery tutorials for flutter. Youll note the WEB (chrome) has a different ("broken"?) orientation, but the simulators show fine. this image also shows fine in OSX and on my Essential phone with android 10

[mobinshaik999]

RotatedBox( quarterTurns: 5, child: Image.file(photo), )
this helped me to rotate the image

[Simpler1]

RotatedBox( quarterTurns: 5, child: Image.file(photo), )
this helped me to rotate the image

While this does rotate the image, it doesn't take into account the source of the problem and now the image is rotated on devices where it used to display correctly.

[lifenautjoe]

Any chance of re-opening this issue pretty please?

It's been 2 years and everyone is still experiencing issues...

The flutter-exif-rotation package built as a work-around to this lacking, no longer works, nor the repository with a workaround in the above comments.

[lifenautjoe]

Hi everyone!

Given we've tried so many things, we've stumbled with what seems to be a "hack" for this issue.

Using flutter_image_compress

import 'package:flutter_image_compress/flutter_image_compress.dart';

// ...

  Future<File> fixExifRotation(File image, {deleteOriginal: false}) async {
    List<int> imageBytes = await image.readAsBytes();

    List<int> result = await FlutterImageCompress.compressWithList(imageBytes,
        quality: 100, rotate: 0);

    final String processedImageUuid = _uuid.v4();
    String imageExtension = basename(image.path);

    final tempPath = await _getTempPath();

    File fixedImage = File('$tempPath/$processedImageUuid$imageExtension');

    await fixedImage.writeAsBytes(result);

    if(deleteOriginal) await image.delete();

    return fixedImage;
  }

// ...

It's all in the line

await FlutterImageCompress.compressWithList(imageBytes,
        quality: 100, rotate: 0);

where the rotate: 0 is the most important part.

Hope this saves someone the struggle we've had for so long!

[orourkedd]

I found that on the iPhone, everything works well after using @lifenautjoe's fix - except when I select live photos. The orientation is still messed up when a live photo is selected.

[Navil]

Any news on this issue ?

[orestesgaolin]

Here is my solution for this problem:

import 'dart:io';
import 'package:exif/exif.dart';
import 'package:image/image.dart' as img;

Future<File> fixExifRotation(String imagePath) async {
    final originalFile = File(imagePath);
    List<int> imageBytes = await originalFile.readAsBytes();

    final originalImage = img.decodeImage(imageBytes);

    final height = originalImage.height;
    final width = originalImage.width;

    // Let's check for the image size
    if (height >= width) {
      // I'm interested in portrait photos so
      // I'll just return here
      return originalFile;
    }

    // We'll use the exif package to read exif data
    // This is map of several exif properties
    // Let's check 'Image Orientation'
    final exifData = await readExifFromBytes(imageBytes);

    img.Image fixedImage;

    if (height < width) {
      logger.logInfo('Rotating image necessary');
      // rotate
      if (exifData['Image Orientation'].printable.contains('Horizontal')) {
        fixedImage = img.copyRotate(originalImage, 90);
      } else if (exifData['Image Orientation'].printable.contains('180')) {
        fixedImage = img.copyRotate(originalImage, -90);
      } else {
        fixedImage = img.copyRotate(originalImage, 0);
      }
    }

    // Here you can select whether you'd like to save it as png
    // or jpg with some compression
    // I choose jpg with 100% quality
    final fixedFile =
        await originalFile.writeAsBytes(img.encodeJpg(fixedImage));

    return fixedFile;
  }

source

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.