使用 Cordova 相机拍摄的相同图像以不同的方向显示

Question

我在 Android 上使用 Cordova 的相机插件捕获一些 jpeg 文件时遇到问题。它们以正确的方向预览，而我在应用程序中本地预览它们，但一旦上传，它们就会以错误的方向显示 在同一个地方。

当我使用浏览器或图像查看器打开图像文件时，它们的方向是正确的。

我的捕获功能：

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);
}

我在场地上没有 CSS 旋转，其他来源的图像工作得很好。而且我的服务器不对图像执行任何类型的转换或压缩。

知道这是怎么发生的吗？

提前致谢。

Answer 1

将 correctOrientation: true 添加到 CameraOptions。

示例：

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);
 }

}

使用 Cordova 相机拍摄的相同图像以不同的方向显示

Same image taken using Cordova camera shown in different orientations

cordova

ionic-framework