HarmonyOS 鸿蒙Next 怎么解决Image组件加载图片被旋转90度的问题

【问题现象】

1. 使用Image组件加载图片时，图片自动被旋转了90度。
2. 问题代码如下：

Image(item)
   .width('100%')
   .aspectRatio(this.getRatio(item))
   .borderRadius(4)

左图为正常显示效果，右图为Image加载显示效果。

【背景知识】

Image组件为图片组件，常用于在应用中显示图片。

【定位思路】

1. 使用****Image组件加载其他图片，检查是否为组件问题**

检查结果：“新闻”图片正常显示，确认非组件问题。

2. 检查原图片Exif 信息，定位其orientation属性

Exif（Exchangeable image file format）是指嵌入在JPEG图像中的元数据，这些元数据提供了关于图像的属性信息和拍摄数据。其中，orientation是拍摄方向属性，我们可以通过上传原图到Exif信息在线网站或者Exif信息查看软件进行查看。

通过在线网站查看图片信息得知该图片的拍摄方向为逆时针旋转90度。由此，定位到图片被旋转的原因。

【解决方案】

方案一：通过组件旋转属性，使图片显示方向正常

我们可以直接给Image组件加上对应的旋转属性，使图片正常显示。因为图片的方向是逆时针90度，那我们将Image组件顺时针旋转90度后，图片会正常显示。通过以下属性旋转：

.rotate({angle:90})

局限性：这种方案只有在我们确定图片的方向信息时才能使用，如果是从网络加载的、不能确定方向的图片列表，该方案则不适用。

方案二：将图片转成ImageSource****对象后读取旋转信息

思路：读取每张图片的方向orientation信息，根据其方向，设置Image组件的旋转方向。

（1）使用image库的createImageSource接口，将图片转换成image.ImageSource对象。

代码示例如下：

const context: Context = getContext(this);
const path: string = context.filesDir + "/test.jpg";
const imageSourceApi: image.ImageSource = image.createImageSource(path);

（2）使用ImageSource的getImageProperty接口获取图片的image.PropertyKey.ORIENTATION旋转信息。

代码示例如下：

imageSourceApi.getImageProperty(image.PropertyKey.ORIENTATION, options)
  .then((data: string) => {
    console.info('Succeeded in getting the value of the specified attribute key of the image.', data);
  }).catch((error: BusinessError) => {
    console.error('Failed to get the value of the specified attribute key of       the image.');
})

日志打印：Succeeded in getting the value of the specified attribute key of the image. Right-top

取到旋转信息Right-top，查阅HarmonyOS文档上该枚举值对应的含义得知，我们应该将Image组件顺时针旋转90度。

（3）最后，将Image组件按照方案一的方法进行旋转，图片正常显示。

详情请见参考链接。