HarmonyOS OCR的结果uri如何转换为 image.PixelMap显示在页面上

参考以下demo：

import { CardRecognition, CallbackParam, CardType, CardSide } from "@kit.VisionKit";
import { image } from '@kit.ImageKit'
import fs from '@ohos.file.fs';


@Entry
@Component
struct Index {

  @State showOCR:boolean = false
  @State src?: image.PixelMap = undefined
  build() {
    Stack() {
      Column(){
        Button('click me')
          .onClick(()=>{
            this.showOCR = true
          })
        Image(this.src)
      }
      if(this.showOCR) {
        this.CardOCRPage()
      }
    }
    .width('100%')
    .height('100%')
  }
  @Builder
  CardOCRPage() {
    // Stack({ alignContent: Alignment.Top }) {
    CardRecognition({
      // 此处选择身份证类型作为示例
      supportType: CardType.CARD_ID,
      cardSide:CardSide.FRONT,
      callback: async (params:CallbackParam)=>{
        this.showOCR = false
        if(params.cardInfo) {
          let imageUri = params.cardInfo['front']['cardImageUri'];
          let file = fs.openSync(imageUri, fs.OpenMode.READ_ONLY);
          console.info('file fd:' + file.fd);
          const imageSource: image.ImageSource = image.createImageSource(file.fd);
          let decodingOptions: image.DecodingOptions = {
            editable: true,
            desiredPixelFormat: 3,
          }
          this.src = await imageSource.createPixelMap(decodingOptions);
        }
      }
    })
      // }
      .width('100%')
      .height('100%')
  }
}