Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[camera, image_picker] Image is rotated after taking photo #35334

Closed
aleksvujic opened this issue Jun 29, 2019 · 38 comments
Closed

[camera, image_picker] Image is rotated after taking photo #35334

aleksvujic opened this issue Jun 29, 2019 · 38 comments

Comments

@aleksvujic
Copy link

@aleksvujic aleksvujic commented Jun 29, 2019

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

This comment has been minimized.

Copy link

@SvenSchoene SvenSchoene commented Jun 29, 2019

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

This comment has been minimized.

Copy link
Author

@aleksvujic aleksvujic commented Jun 30, 2019

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.

@aleksvujic aleksvujic changed the title [image_picker] Image is rotated after taking photo [camera, image_picker] Image is rotated after taking photo Jul 1, 2019
@flower189

This comment has been minimized.

Copy link

@flower189 flower189 commented Jul 2, 2019

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

This comment has been minimized.

Copy link
Author

@aleksvujic aleksvujic commented Jul 3, 2019

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

@flower189

This comment has been minimized.

Copy link

@flower189 flower189 commented Jul 3, 2019

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

This comment has been minimized.

Copy link
Author

@aleksvujic aleksvujic commented Jul 3, 2019

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 comment has been minimized.

Copy link

@SvenSchoene SvenSchoene commented Jul 3, 2019

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

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

@aleksvujic

This comment has been minimized.

Copy link
Author

@aleksvujic aleksvujic commented Jul 3, 2019

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

@SvenSchoene

This comment has been minimized.

Copy link

@SvenSchoene SvenSchoene commented Jul 3, 2019

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

This comment has been minimized.

Copy link
Author

@aleksvujic aleksvujic commented Jul 3, 2019

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

This comment has been minimized.

Copy link
Author

@aleksvujic aleksvujic commented Jul 6, 2019

@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

This comment has been minimized.

Copy link

@flower189 flower189 commented Jul 7, 2019

@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

This comment has been minimized.

Copy link
Contributor

@mehmetf mehmetf commented Jul 17, 2019

See #19458 (comment) .

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

@aleksvujic

This comment has been minimized.

Copy link
Author

@aleksvujic aleksvujic commented Jul 18, 2019

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

@kevin-haynie

This comment has been minimized.

Copy link

@kevin-haynie kevin-haynie commented Aug 5, 2019

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

This comment has been minimized.

Copy link

@kmdinake kmdinake commented Aug 7, 2019

@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

This comment has been minimized.

Copy link
Member

@chinmaygarde chinmaygarde commented Aug 10, 2019

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.

Screen Shot 2019-08-09 at 6 18 14 PM

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

This comment has been minimized.

Copy link

@AbbasKMoussa AbbasKMoussa commented Oct 5, 2019

any updates on this issue?

@lifenautjoe

This comment has been minimized.

Copy link

@lifenautjoe lifenautjoe commented Nov 1, 2019

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

@orischwartz

This comment has been minimized.

Copy link
Contributor

@orischwartz orischwartz commented Nov 1, 2019

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

This comment has been minimized.

Copy link

@lifenautjoe lifenautjoe commented Nov 3, 2019

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

This comment has been minimized.

Copy link

@HickYeah HickYeah commented Nov 24, 2019

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 comment has been minimized.

Copy link

@Firman95 Firman95 commented Nov 28, 2019

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

This comment has been minimized.

Copy link

@SpiegelSoft SpiegelSoft commented Dec 1, 2019

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

This comment has been minimized.

Copy link

@lifenautjoe lifenautjoe commented Dec 1, 2019

@mehmetf

This comment has been minimized.

Copy link
Contributor

@mehmetf mehmetf commented Dec 1, 2019

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.

@mehmetf mehmetf closed this Dec 1, 2019
@KimHeeSeok

This comment has been minimized.

Copy link

@KimHeeSeok KimHeeSeok commented Dec 2, 2019

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

This comment has been minimized.

Copy link

@rlee1990 rlee1990 commented Dec 2, 2019

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

@gianlucainnocente

This comment has been minimized.

Copy link

@gianlucainnocente gianlucainnocente commented Dec 2, 2019

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

@Mrfixedadmin

This comment has been minimized.

Copy link

@Mrfixedadmin Mrfixedadmin commented Dec 4, 2019

Screen Shot 2019-12-04 at 1 24 55 PM

myface

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

This comment has been minimized.

Copy link

@mobinshaik999 mobinshaik999 commented Dec 15, 2019

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

@Simpler1

This comment has been minimized.

Copy link

@Simpler1 Simpler1 commented Feb 7, 2020

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

This comment has been minimized.

Copy link

@lifenautjoe lifenautjoe commented Feb 15, 2020

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

This comment has been minimized.

Copy link

@lifenautjoe lifenautjoe commented Feb 16, 2020

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

This comment has been minimized.

Copy link

@orourkedd orourkedd commented Feb 24, 2020

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

This comment has been minimized.

Copy link

@Navil Navil commented Feb 28, 2020

Any news on this issue ?

@orestesgaolin

This comment has been minimized.

Copy link

@orestesgaolin orestesgaolin commented Mar 14, 2020

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 comment has been minimized.

Copy link

@lock lock bot commented Apr 4, 2020

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.

@lock lock bot locked and limited conversation to collaborators Apr 4, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.