Cordova相机插件安卓拍摄图片本地预览正常上传后方向错误

问题原因 #

该问题是JPEG图片的EXIF方向元数据未被正确处理导致的，具体逻辑如下：

• 系统图像查看器、浏览器、你应用内的预览组件都支持自动读取EXIF中的Orientation标签，会自动旋转图片像素到正确方向展示，所以你在本地查看时方向正常。
• 大部分Web端默认的图片展示逻辑、部分低版本的展示组件不会识别EXIF方向信息，会直接按照图片像素存储的原始方向渲染，就会出现方向错误。
• 你提到服务端不会对图片做任何处理，说明你上传的原始文件就保留了和拍摄方向不一致的像素存储方向，仅靠EXIF标签标记正确方向。

代码问题 #

你当前的Cordova Camera配置没有开启自动修正方向的参数，拍摄得到的文件保留了原始的像素方向和EXIF方向标记：

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,
            // 缺少方向修正的相关配置
        }
        // 后续读取blob的逻辑直接使用原始文件的二进制内容，没有处理方向问题
        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);
}

解决方案 #

方案一（推荐，改造成本最低） #

在Camera配置中新增方向修正参数，让插件拍摄后直接修正像素方向，抹除冗余的EXIF方向标记：

const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType,
    // 新增以下两个配置
    correctOrientation: true,
    orientation: 'auto'
}

方案二（适用于需要自定义处理的场景） #

如果开启上述配置后还有问题，可以在前端获取图片后，手动读取EXIF的Orientation标签，将图片绘制到Canvas上旋转到正确方向后，再导出Blob用于上传，这样上传的文件本身像素方向就是正确的，不需要依赖下游的EXIF识别能力。

内容的提问来源于stack exchange，提问作者rzsk