Lock image to specific orientation

[Redriposte]

Hi and thank for this powerful library,

I m looking for a way to lock the image in portrait or landspace format when the image is loaded and keep the same orientation when the tablet is rotated.

The image preview (before loaded in the Image editor) can be displayed in portrait format but when it is loaded it change to landscape and locked into this format.

I don't want to use setPreferredOrientations of flutter (user can rotate the screen) and neither the cropRotateEditor (I don't use it I the main editor).

Any tips ?

Thanks.

[hm21]

Hi,

That sounds like there's an EXIF orientation issue that gets lost when the editor finishes converting the image to a Uint8List. I don’t have a perfect solution for this scenario, since EXIF orientation problems are always a bit tricky. However, you could try manipulating the EXIF orientation before you load it into the editor as shown below or pre-rotate the image using the image package, which might fix the issue.

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

Future<void> setNormalOrientation() async {
  final bytes = await File('input.jpg').readAsBytes();
  final image = img.decodeImage(bytes);
  if (image == null) return;

  // Set EXIF orientation to "normal"
  image.exif.setAttribute(
    'Orientation',
    img.IfdValueShort(1),
  );

  final output = img.encodeJpg(
    image,
    quality: 95,
    exif: image.exif,
  );

  await File('output.jpg').writeAsBytes(output);
}

[Redriposte]

Hi, thank for your help.

I found a way close to your using copyRotate from the image package. So I can manage the orientation when the image is loaded but do I have a way to lock the orientation of the image depending the orientation of the phone/tablet ?

I create an image explaining what I try to do.

Thank.

[hm21]

Yes, but in that case you’ll need to replace the editor’s top and bottom bar with your own and interact with the editor using a GlobalKey. You can then wrap the editor in a RotatedBox and use OrientationBuilder or the sensor_plus package to detect device rotation. When the device rotates, you simply rotate the editor in the corresponding direction.

[Redriposte]

Okay, I'll try that, thank you for your advice.