HarmonyOS 鸿蒙Next 为什么有的图片加载之后会旋转

图片自身EXIF中保留图片旋转角度orientation,所以image组件旋转展示

1. 通过getImageProperty获取当前图片旋转角度
2. 将piexMap旋转后展示

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { BusinessError } from '@kit.BasicServicesKit';
import fs from '@ohos.file.fs';
import { common } from '@kit.AbilityKit';
import picker from '@ohos.file.picker';
import { fileIo } from '@kit.CoreFileKit';
import { promptAction } from '@kit.ArkUI';
import image from '@ohos.multimedia.image';

// 获取应用文件路径
let context = getContext(this) as common.UIAbilityContext;

async function savePhotoToGallery(context: common.UIAbilityContext) {
    let helper = photoAccessHelper.getPhotoAccessHelper(context);
    try {
        // onClick触发后5秒内通过createAsset接口创建图片文件，5秒后createAsset权限收回。
        let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');
        // 使用uri打开文件，可以持续写入内容，写入过程不受时间限制
        let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
        context.resourceManager.getMediaContent($r('app.media.123_2').id, 0)
        .then(async value => {
            let media = value.buffer;
            // 写到媒体库文件中
            await fileIo.write(file.fd, media);
            await fileIo.close(file.fd);
            promptAction.showToast({ message: '已保存至相册！' });
        });
    } catch (error) {
        const err: BusinessError = error as BusinessError;
        console.error(`Failed to save photo. Code is ${err.code}, message is ${err.message}`);
    }
}

@Entry
@Component
struct Index {
    @State url: string = ''
    @State pixelMap: image.PixelMap|undefined = undefined

    build() {
        Column() {
            SaveButton({
                text: SaveDescription.SAVE_TO_GALLERY,
                buttonType: ButtonType.Capsule,
                icon: SaveIconStyle.FULL_FILLED
            })
            .onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) => {
                if (result === SaveButtonOnClickResult.SUCCESS) {
                    const context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
                    // 免去权限申请和权限请求等环节，获得临时授权，保存对应图片
                    savePhotoToGallery(context);
                } else {
                    promptAction.showToast({ message: '设置权限失败！' })
                }
            })
            Button('上传')
            .onClick(() => {
                try {
                    const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();

                    photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE
                    photoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目

                    let uris: Array<string> = [];
                    const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
                    photoViewPicker.select(photoSelectOptions).then(async (photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
                        uris = photoSelectResult.photoUris;
                        let file = fs.openSync(uris[0], fs.OpenMode.READ_ONLY);
                        console.info('file fd: ' + file.fd);
                        let imageSource: image.ImageSource = image.createImageSource(file.fd)

                        let options: image.ImagePropertyOptions = { index: 0, defaultValue: '9999' }
                        //查看当前图片旋转角度
                        let Orientation = await imageSource.getImageProperty(image.PropertyKey.ORIENTATION, options) //图片方向 Right-top
                        console.error('Orientation:'+Orientation)

                        if (Orientation==='Right-top') {
                            let decodingOptions: image.DecodingOptions = {
                                editable: true,
                                desiredPixelFormat: 3,
                            }
                            let pixelMap = imageSource.createPixelMapSync(decodingOptions)
                            //旋转九十度
                            await pixelMap.rotate(90)
                            this.pixelMap = pixelMap
                        } else {
                            console.error('其他旋转方向xxxxxxxxxxx')
                        }
                        console.info('photoViewPicker.select to file succeed and uris are:' + uris);
                    }).catch((err: BusinessError) => {
                        console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
                    })
                } catch (e) {
                    console.error(JSON.stringify(e))
                }
            })

            Image(this.pixelMap)
            .onError((msg)=>{
                console.error('onError:'+JSON.stringify(msg))
            })
            .onComplete((msg)=>{
                console.log('onComplete:'+JSON.stringify(msg))
            })
        }
    }
}