Same image taken using Cordova camera shown in different orientations

Issue

I have the problem with some jpeg files captured using Cordova's camera plugin on Android. They preview in right orientation while i preview them locally in the application but once uploaded they are shown in wrong orientation in the same place.

Image files orientation is OK when i open them using browser or image viewer.

My capture function:

async takePicture(sourceType) {
        const options: CameraOptions = {
            quality: 100,
            destinationType: this.camera.DestinationType.FILE_URI,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE,
            sourceType
        }
        let imageUri: string = await this.camera.getPicture(options);
        if (!imageUri.startsWith("file://")) {
            imageUri = "file://" + imageUri;
        }

        const imageUrl = Capacitor.convertFileSrc(imageUri);
        this.image = this.domSanitizer.bypassSecurityTrustResourceUrl(imageUrl);
        this.imageFile = await fetch(imageUrl).then(res => res.blob());
        await this.cropImage(imageUri);
}

I have no CSS rotation on the field and images from other sources work just fine. And my server doesn't perform any type of conversion or compression on the images.

Any idea on how this could happen?

Thanks in advance.

Solution

Add correctOrientation: true to CameraOptions.

sample:

import {Camera, CameraOptions} from '@ionic-native/camera/ngx';

class Example {

constructor( private camera: Camera){}


  takePicture(){

   const options: CameraOptions = {
            quality: 100,
            destinationType: this.camera.DestinationType.FILE_URI,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE,
            correctOrientation: true,
            sourceType: this.camera.PictureSourceType.CAMERA
        }
  let image: string = await this.camera.getPicture(options);
 }

}

Answered By - Ghonche Yqr