[image_picker] image_picker: ^1.0.7 image rotation issue in IOS

[ItsArsalanAziz]

Steps to reproduce

1. get the image from library/gallery
2. select and show it
3. not all but some images are rotated to anticlockwise left side 90 degrees in IOS devices

Expected results

The image must be same as it is placed in the gallery.

Actual results

Image rotated automatically in IOS when choosing from library/gallery using ImagePicker().pickImage(ImageSource.gallery).

Code sample

ImagePicker().pickImage(source: ImageSource.gallery).then((value) async { if (value != null) { List imageBytes = File(value.path).readAsBytesSync(); String _base64Image = base64Encode(imageBytes); } }).onError((err, stackTrace) { debugPrint(err.toString()); });

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Flutter (Channel stable, 3.16.7, on Microsoft Windows [Version 10.0.19044.3086], locale en-US) • Flutter version 3.16.7 on channel stable at D:\dev\projects\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision ef1af02aea (3 months ago), 2024-01-11 15:19:26 -0600 • Engine revision 4a585b7929 • Dart version 3.2.4 • DevTools version 2.28.5

[huycozy]

Hi @ItsArsalanAziz What is your iOS device information (OS, model)?

not all but some images are rotated

Can you share these images? It would be helpful if you could find out how these images differ from the unaffected images.

[ItsArsalanAziz]

@huycozy

OS: 17.4.1 Model: iphone 13 pro max it occurs on other IOS too

Below images show the behavior clearly

[huycozy]

Could you share the raw image so that I can try it on my end? Please also provide a completed and minimal reproducible code sample that doesn’t include 3rd party plugins or complex production code. Thank you!

[ItsArsalanAziz]

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: "Test",
      home: MainApp(),
    );
  }
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  _pickImage(BuildContext context, src) {
    ImagePicker().pickImage(source: src).then((value) async {
      if (value != null) {
        showDialog(
          context: context,
          builder: (context) {
            return Center(
              child: Image.file(
                File(value.path),
                height: 300.0,
                width: 300.0,
                fit: BoxFit.cover,
              ),
            );
          },
        );
      }
    }).onError((err, stackTrace) {
      debugPrint(err.toString());
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () => _pickImage(context, ImageSource.gallery),
              behavior: HitTestBehavior.opaque,
              child: const Text(
                'Pick from Gallery',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontFamily: 'Roboto',
                  color: Colors.blue,
                  fontSize: 16,
                ),
              ),
            ),
            const SizedBox(height: 30),
            GestureDetector(
              onTap: () => _pickImage(context, ImageSource.camera),
              behavior: HitTestBehavior.opaque,
              child: const Text(
                'Capture from Camera',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontFamily: 'Roboto',
                  color: Colors.blue,
                  fontSize: 16,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

[ItsArsalanAziz]

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: "Test",
      home: MainApp(),
    );
  }
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  _pickImage(BuildContext context, src) {
    ImagePicker().pickImage(source: src).then((value) async {
      if (value != null) {
        showDialog(
          context: context,
          builder: (context) {
            return Center(
              child: Image.file(
                File(value.path),
                height: 300.0,
                width: 300.0,
                fit: BoxFit.cover,
              ),
            );
          },
        );
      }
    }).onError((err, stackTrace) {
      debugPrint(err.toString());
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () => _pickImage(context, ImageSource.gallery),
              behavior: HitTestBehavior.opaque,
              child: const Text(
                'Pick from Gallery',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontFamily: 'Roboto',
                  color: Colors.blue,
                  fontSize: 16,
                ),
              ),
            ),
            const SizedBox(height: 30),
            GestureDetector(
              onTap: () => _pickImage(context, ImageSource.camera),
              behavior: HitTestBehavior.opaque,
              child: const Text(
                'Capture from Camera',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontFamily: 'Roboto',
                  color: Colors.blue,
                  fontSize: 16,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Above is the simplest code, by running it with the below image you can see the rotation issue. Kindly check it on latest IOS device.

[huycozy]

Thanks for the update. I used your sample code and picture and ran it on iPhone 7, iOS 15.8, iPhone 15 Pro, iOS 17.4 (emulator) but couldn't reproduce the issue.

Demo

Could you share the demo of sample code above on your device? And please provide the image_picker_ios version you are using (you should get it from pubspec.lock file)

[ItsArsalanAziz]

https://github.com/flutter/flutter/assets/104122442/91dfa6a1-c741-4ce4-92da-e6ef657f30fb

You can see clearly that I have used the official image_picker example in 13 pro max to reproduce it. Kindly use actual device, in emulators it works fine and it occurs only in actual device.

Note: I have iPhone 6, 7, 13, and 13 pro max but it only occurs in 13 pro max, meanwhile for iPhone 13 the OS version was 16.4.1 on which it doesn't occur and when I update it to 17.4.1 it works fine too. In short, in all the iPhones that I have, this issue does not occur except for 13 pro max.

image_picker_ios version: 0.8.9+2 (same for the sample code I have provided and the official image_picker example)

[huycozy]

Thanks for checking. Marking this as a device-specific issue on iPhone 13 Pro max.

[ItsArsalanAziz]

@huycozy I hope this will be fixed in next image_picker release!

[bilaltruemedit]

I'm facing the same issue on different android devices.

[vashworth]

I was able to recreate this with my iPhone 14 Pro Max. It seems this bug may be specific to ProRaw images, when requestFullMetadata is true (the default).

@ItsArsalanAziz Can you confirm that the image you were able to recreate with was a RAW image? You can check this by opening the image in Photos Gallery, clicking the ℹ️ info symbol and check the type (see image below - where it says JPEG, it would say RAW).

Could you also try changing requestFullMetadata to false to see if that stops it from rotating?

final XFile? pickedFile = await _picker.getImageFromSource(
  source: source,
  options: ImagePickerOptions(
    maxWidth: maxWidth,
    maxHeight: maxHeight,
    imageQuality: quality,
    requestFullMetadata: false,
  ),
);

[ItsArsalanAziz]

thank you for the help @vashworth, requestFullMetadata: false this solved my problem!

[ty-fleming]

I had this issue too on my iPhone 15 Pro Max. Changing my code from

var images = await _picker.pickMultiImage();

to

var images = await _picker.pickMultiImage(requestFullMetadata: false);

solved my problem as well!