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

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

// xxx.ets
import { CardRecognition, CardType, CallbackParam, CardSide } from '@kit.VisionKit'
import { image } from '@kit.ImageKit'

@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() {
    CardRecognition({
      // 此处选择身份证类型作为示例
      supportType: CardType.CARD_ID,
      cardSide:CardSide.FRONT,
      callback:(params:CallbackParam)=>{
        this.showOCR = false
        if(params.cardInfo) {
          this.src =image.createImageSource(params.cardInfo['front']['cardImageUri']).createPixelMapSync()
        }
      }
    })
      .width('100%')
      .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中OCR的结果uri如何转换为image.PixelMap显示在页面上的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

参考这个：

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() {
    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%')
  }
}

更多关于HarmonyOS鸿蒙Next中OCR的结果uri如何转换为image.PixelMap显示在页面上的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，OCR的结果通常会返回一个URI，表示识别到的图像资源。要将这个URI转换为image.PixelMap并显示在页面上，可以按照以下步骤操作：

  1. 获取URI：首先，确保你已经通过OCR获取到了图像的URI。

  2. 使用ImageSource加载图像：使用ImageSource类来加载URI对应的图像资源。ImageSource提供了从URI、文件路径或字节流中创建图像源的能力。

    import image from '[@ohos](/user/ohos).multimedia.image';

let imageSource = image.createImageSource(uri);

  3. 创建PixelMap：通过ImageSource创建PixelMap对象。PixelMap是图像的像素数据表示，可以直接用于图像处理或显示。

    let pixelMap = await imageSource.createPixelMap();

  4. 显示PixelMap：将PixelMap对象传递给UI组件进行显示。例如，使用Image组件来显示图像。

    import { Image } from '[@ohos](/user/ohos).arkui';

// 假设你在一个组件中使用
[@Component](/user/Component)
struct MyComponent {
  @State pixelMap: image.PixelMap | null = null;

  async aboutToAppear() {
    let imageSource = image.createImageSource(uri);
    this.pixelMap = await imageSource.createPixelMap();
  }

  build() {
    Column() {
      if (this.pixelMap) {
        Image(this.pixelMap)
          .width('100%')
          .height('100%')
      }
    }
  }
}

通过以上步骤，你可以将OCR返回的URI转换为PixelMap并在页面上显示出来。

在HarmonyOS鸿蒙Next中，OCR结果中的URI可以通过ImageSource和PixelMap进行转换。首先，使用ImageSource.createFromUri()方法根据URI创建ImageSource对象。然后，调用ImageSource.createPixelmap()方法生成PixelMap。最后，将PixelMap传递给UI组件（如Image）进行显示。示例代码如下：

ImageSource imageSource = ImageSource.createFromUri(ocrResultUri);
PixelMap pixelMap = imageSource.createPixelmap(null);
Image image = new Image(context);
image.setPixelMap(pixelMap);

这样，OCR结果的图像就可以正确显示在页面上了。

回到顶部