HarmonyOS CardRecognition卡证识别拿到的身份证uri,如何获取到身份证图片？

Question

如题：HarmonyOS CardRecognition卡证识别拿到的身份证uri,如何获取到身份证图片？

Answer 1

整体思路：

1、只读打开文件

2、复制到本应用沙箱中

3、做图片展示

示例代码：

import { CardRecognition, CallbackParam, CardType } from "@kit.VisionKit";
import { hilog } from '@kit.PerformanceAnalysisKit';
import fs from '@ohos.file.fs';
import { image } from '@kit.ImageKit';
/**
 * 卡证识别页
 * 卡证识别显示身份证照片
 * @since 2024-06-27
 */
@Entry
@Component
export struct cardRecognitionPage {
  private myFile: fs.File | undefined = undefined;
  private myFile1: fs.File | undefined = undefined;
  @State pixelMap: PixelMap | undefined = undefined;
  @State pixelMap1: PixelMap | undefined = undefined;

  build() {
    Stack({ alignContent: Alignment.Top }) {
      CardRecognition({
        supportType: CardType.CARD_ID,
        callback: (async (params: CallbackParam) => {
          try {
            // front 是人像，back 是国徽
            this.myFile = await fs.openSync(params.cardInfo?.front?.cardImageUri, fs.OpenMode.READ_ONLY)
            this.myFile1 = await fs.openSync(params.cardInfo?.back?.cardImageUri, fs.OpenMode.READ_ONLY)
          } catch (e) {
            hilog.info(0x0001, TAG, `params params cardInfo back error: ${JSON.stringify(e)}`)
          }

          let context = getContext(this);
          let pathDir = context.filesDir;
          hilog.info(0x0001, TAG, `params params cardInfo pathDir: ${JSON.stringify(pathDir)}`)

          // 正反面两张照片都拷贝进应用沙箱
          fs.copyFileSync(this.myFile?.fd, pathDir + '/wy.jpeg');
          fs.copyFileSync(this.myFile1?.fd, pathDir + '/wy1.jpeg');

          // 判断照片拷贝是否成功
          console.log('params params copy result： ' + fs.accessSync(pathDir + '/xx.jpeg'))
          fs.close(this.myFile)

          // 取人像面转换成可显示的类型
          let imageSourceApi = image.createImageSource(pathDir + '/xx.jpeg');
          let pixelMap: image.PixelMap = imageSourceApi.createPixelMapSync();
          this.pixelMap = pixelMap
        })
      })
      Column() {
        //显示人像面
        Image(this.pixelMap)// .bindContextMenu(this.MenuBuilder(item), ResponseType.LongPress)
          .objectFit(ImageFit.Contain)
          .autoResize(false)
      }
    }
    .width('100%')
    .height('100%')
  }
}