HarmonyOS 鸿蒙Next 如何解决自定义扫码界面创建的截图与预览流中不一致问题 鸿蒙场景化案例

HarmonyOS 鸿蒙Next 如何解决自定义扫码界面创建的截图与预览流中不一致问题 鸿蒙场景化案例

【问题现象】

自定义相机，使用createPixelMapFromSurface创建XComponent的截图和自定义扫码预览流XComponent中显示的不一致，createPixelMapFromSurface创建的截图不完整。

【背景知识】

• 开发者可通过XComponent显示自定义相机扫码界面。
• image.createPixelMapFromSurface这个方法可以通过传入XComponent的surfaceId，以及region选定区域的信息来获取XComponent显示的截图。
• 相机预览流支持的像素获取cameraOutputCapability.previewProfiles。

【定位思路】

（1）查看自定义扫码中预览流的宽高比，像素比是width*height为2336*1080。

（2）如果XComponent的宽高是根据自定的大小设置的，自定扫码返回的预览流中size大小和XComponent实际的size大小是不一致的。比如现在使用XComponent的宽是1216px、高是1478px，但是其实扫码预览流实际宽为2384px、高为1080px，XComponent对预览流进行了拉伸处理。

（3）这个时候如果image.createPixelMapFromSurface截图的image.Region设置为XComponent的宽高，截图就只会截取部分相机返回的预览流，因此推断像素不对截取的图片就不对。

问题代码如下：

let region: image.Region = { x: 0, y: 0, size: { height:1478, width: 1216 } }

【解决方案】

通过相机预览回调的宽高设置createPixelMapFromSurface的image.Region。

（1）获取自定义扫码界面回调的相机预览流。

代码示例如下：

private frameCallback: AsyncCallback<customScan.ScanFrame> =
    async (error: BusinessError, scanFrame: customScan.ScanFrame) => {
      if (error) {
        return;
      } else {
        this.ImageHeight= scanFrame.height
        this.ImageWidth= scanFrame.width
      }
    }
 

（2）获取相机预览流的宽高后设置image.Region的宽高。

代码示例如下：

let region: image.Region ={ x: 0, y: 0, size: { height: this.ImageHeight, width: this.ImageWidth } }
image.createPixelMapFromSurface(this.surfaceId, region).then(async (pixmap: image.PixelMap) => {
console.info('Succeeded in creating pixelmap from Surface');
      await pixmap.rotate(90)
      let base64Str = await ImageUtil.pixelMapToBase64Str(pixmap)
      if (base64Str != undefined) {
           ToastUtil.showToast('截图成功')
           this.imageList.push(base64Str)
           }
       }).catch((error: BusinessError) => {
           ToastUtil.showToast('截图失败')
           console.error(`Failed to create pixelmap. code is ${error.code}, message is ${error.message}`);
 });
 

使用相机预览流设置宽高后返回的截图：