拉起相机时，预览界面花屏
============

#### 问题现象

相机类应用，打开相机后，查看相机预览界面，出现花屏问题。

#### 背景知识

*   图像数据有三要素，分别为width、height、stride。根据[相机预览花屏解决方案](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-deal-stride-solution)，当width与stride不一致时，需要对stride进行处理，处理无效像素后解析出正确的像素数据，避免出现预览流花屏。
*   stride指在内存中每行像素实际占用的字节数，在不同的平台上的值不同，开发者需根据实际业务获取stride后做处理适配。
*   [getComponent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-image-image#getcomponent9)可以根据图像的组件类型从图像中获取组件缓存并使用callback返回结果。通过预览流帧数据的返回值image.Component.rowStride可获取stride。

#### 问题定位

检查应用中使用的stride，排查应用在处理图像数据时设置的stride是否合理。应用处理图像数据时获取到的stride的值为1088，与width的值不相等，且未对width进行处理。

onImageArrival(receiver: image.ImageReceiver): void {
 _ // 注册imageArrival监听_
  receiver.on('imageArrival', () => {
    receiver.readNextImage((err: BusinessError, nextImage: image.Image) => {
      if (err || nextImage === undefined) {
        _// 错误处理_
        _// ..._
        return;
      }
      if (nextImage) {
        nextImage.getComponent(image.ComponentType.JPEG, async (\_err, component: image.Component) => {
          let width = 1080;
          let height = 1080;
          let stride = component.rowStride; _// 获取到的stride的值为1088_
          let pixelMap = await image.createPixelMap(component.byteBuffer, {
            size: {
              height: height,
              width: width
            },
            srcPixelFormat: image.PixelMapFormat.NV21
          })
          AppStorage.setOrCreate('stridePixel', pixelMap);
          nextImage.release();
        })
      }
    });
  })
}

#### 分析结论

应用在处理图像数据时，未根据图像数据的stride对width进行额外处理。

#### 修改建议

根据图像数据的stride对width进行处理，可以参考[处理图像预览流](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/camera-dual-channel-preview#用于处理图像的第一路预览流)中第4步的代码。完整实例可以参考[双路预览完整示例](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/camera-dual-channel-preview#完整示例)。