HarmonyOS 横向拍照的身份证图片，如何旋转-90度显示到Image组件上？现在显示是竖的，变形了？

Question

如题：HarmonyOS 横向拍照的身份证图片，如何旋转-90度显示到Image组件上？现在显示是竖的，变形了？

Answer 1

可参考以下demo，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-transformation-V5\#rotate

import { BusinessError, request } from '@kit.BasicServicesKit';
import fs from '@ohos.file.fs';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { image } from '@kit.ImageKit';

@Entry
@Component
struct Index {
  @State imgUrl: PixelMap | undefined = undefined;
  build() {

    Column() {
      Button('选择图片旋转').onClick(() => {
        const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
        photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE
        photoSelectOptions.maxSelectNumber = 1;

        const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
        //拍照或选择图片
        photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
          photoSelectResult.photoUris.forEach((uri) => {
            let file = fs.openSync(uri, fs.OpenMode.CREATE);
            image.createImageSource(file.fd).createPixelMap().then((pixelMap: PixelMap) => {
              pixelMap.rotate(90).then(()=>{
                console.log('rotate success')
                this.imgUrl = pixelMap;
              }).catch((err: BusinessError)=>{
                console.log('rotate fail with err '+JSON.stringify(err))
              });
            });
          })
        }).catch((err: BusinessError) => {
          console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
        })
      })
      Image(this.imgUrl).height(100).width(100)
    }
    .width('100%')
  }
}