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

Question

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

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

参考以下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%') 
  } 
}