目录

自定义相机双路预览通过Image组件显示ImageReceiver接收的预览流图像异常

问题现象

自定义相机双路预览，将ImageReceiver接收到的预览图像流通过Image组件显示，Image组件的objectFit属性设置为ImageFit.Contain，但是Image组件不能完整显示预览图像流，显示的画面不完整。用于显示预览图像数据的Image组件的UI描述如下：

Column() {
  // this.imagePixelMap为ImageReceiver接收的预览流数据
  Image(this.imagePixelMap)
    .width('100%')
    .height('100%')
    .rotate({ angle: -90 })       // 组件逆时针旋转90度，用于适应相机预览流的旋转角度
    .objectFit(ImageFit.Contain)  // 设置图片的填充，使得预览流画面在Image组件中完整显示
    .backgroundColor(Color.Black)
}
.clip(true)
.width(this.floatWindowWidth)     // 组件宽
.height(this.floatWindowHeight)   // 组件高

背景知识

问题定位

为了适应相机预览流图像的旋转角度，将Image组件逆时针旋转了90度，若组件宽高不一致时，旋转后会导致Image组件的一部分超出父容器组件的范围，同时因为父容器Column组件设置了clip属性为true，这将导致Image组件旋转后超出Column组件的部分将被裁剪，若被裁剪的部分包含图像，则会导致图像显示不完整。

分析结论

Image组件旋转后超出了父容器Column组件的范围，同时Column组件设置了clip属性为true，将Image组件超出Column组件的部分裁剪，被裁剪的部分包括了显示的相机预览流画面，导致相机预览流图像不能完整显示。

修改建议

不通过旋转Image组件来适应相机预览流图像的旋转。调用PreviewOutput的getPreviewRotation接口，获取预览流的旋转角度。在ImageReceiver的imageArrival回调中接收到预览流图像后，通过获取的预览流旋转角度调用PixelMap.rotate来旋转预览流图像将图像调正。