HarmonyOS鸿蒙Next中网络图片用Image组件加载变成横屏显示如何解决

【问题现象】

图片地址在安卓和iOS上都是显示的竖屏，浏览器也显示正常，但是HarmonyOS系统上加载时会显示成横屏，问题代码和截图如下：

Image(图片地址)
  .objectFit(ImageFit.Contain)
  .width('100%')
  .backgroundColor(0x181818)

原图如下：

HarmonyOS系统上加载效果如下：

【背景知识】

1. Exif(Exchangeable image file format 可交换图像文件格式)，是一种图像文件格式，其数据存储与JPEG格式是完全相同的,EXIF可以附加于JPEG、TIFF、RIFF、RAW等文件之中，为其增加有关数码相机拍摄信息的内容和索引图或图像处理软件的版本信息。
2. ImageSource.getImageProperty：可以通过该接口获取图片中给定索引处图像的指定属性键的值，仅支持JPEG、PNG和HEIF^12+^（不同硬件设备支持情况不同）文件，且需要包含Exif信息。其中可以通过supportedFormats属性查询是否支持HEIF格式的Exif读写。

【定位思路】

该问题的根本原因是图片里的Exif信息存在旋转90°的信息，HarmonyOS的Image组件加载图片是按照这个信息进行的旋转。如果不想旋转需要应用自行进行适配，目前可尝试如下以下方案适配：

1. 由于Image组件无法拿到图片数据，所以需要首先通过网络请求下载下来图片，然后使用image的createImageSource转换成image.ImageSource对象；
2. 获取图片Exif信息，可以通过getImageProperty接口 (PropertyKey传入"Orientation"）获取旋转信息，然后判断图片是否要旋转，如果需要旋转可以通过如下属性进行调整，Image(图片地址) .rotate({angle:90})；
3. 通过imageSource.createPixelMap接口，转成PixelMap对象，最后将PixelMap对象的图片给到Image组件。

【解决方案】

代码示例如下：

// 1、通过request.downloadFile方法下载到本地之后展示
let tempPath = getContext(this).filesDir + '/' + new Date().getTime() + '.jpeg';
try {
  request.downloadFile(getContext(this), {
    url: this.testUrl,
    filePath: tempPath
  }).then((downloadTask: request.DownloadTask) => {
    downloadTask.on('complete', async () => {
      let file = fileIo.openSync(tempPath, fileIo.OpenMode.READ_ONLY);
      let imageSource: image.ImageSource = image.createImageSource(file.fd);
    })
  })
} catch (error) {
}

// 2、获取图片的Exif信息中的旋转角度，并判断是否需要旋转
imageSource.getImageProperty(image.PropertyKey.ORIENTATION)
  .then((data: string) => {
    if (data === "Right-top") {
      this.angle = 90
    }
  })

// 3、通过imageSource.createPixelMap接口，转成PixelMap对象
let opts: image.InitializationOptions = {
  editable: false,
  pixelFormat: image.PixelMapFormat.RGBA_8888,
  alphaType: 0,
  size: { height: 100, width: 100 }
}
this.imageUrl = await imageSource.createPixelMap(opts);

// 4、最后将PixelMap对象的图片给到Image组件
Image(this.imageUrl).objectFit(ImageFit.Contain).rotate({ angle: this.angle }).width('100%')

【总结】

Image在加载图片时受图片的Exif信息的影响，可能会和预期不符，此时需要先读取并分析图片的Exif信息，然后再用正确的属性配置加载图片。