07-HarmonyOS5-ObjectDetection-Case

import { photoAccessHelper } from '@kit.MediaLibraryKit' import { fileIo } from '@kit.CoreFileKit' import image from '@ohos.multimedia.image' import { objectDetection, visionBase } from '@kit.CoreVisionKit' import { promptAction } from '@kit.ArkUI';

const LabelMap: Record<number, string> = { 0: "风景", 1: "动物", 2: "植物", 3: "建筑", 5: "人脸", 6: "表格", 7: "文本", 8: "人头", 9: "猫头", 10: "狗头", 11: "食物", 12: "汽车", 13: "人体", 21: "文档", 22: "卡证" };

@Entry @ComponentV2 struct ObjectDetection { @Local chooseImage?: PixelMap @Local objects: objectDetection.VisionObject[] = [] @Local canvasWidth: number = 320 @Local canvasHeight: number = 200 @Local bozaiImage?: PixelMap

  async aboutToAppear(): Promise<void> {
    const resManager = getContext()
      .resourceManager
    const bozaiArray = await resManager.getMediaContent($r('app.media.bozai'))
    const bozaiResource = image.createImageSource(bozaiArray.buffer)
    this.bozaiImage = await bozaiResource.createPixelMap()
  }

  async checkImage() {
    // 1. 选择图片
    const photoPicker = new photoAccessHelper.PhotoViewPicker()
    const result = await photoPicker.select({
      MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
      maxSelectNumber: 1
    })
    const uri = result.photoUris[0]
    if (uri) {
      const imageFile = await fileIo.open(uri, fileIo.OpenMode.READ_ONLY)
      const imageSource = image.createImageSource(imageFile.fd)
      this.chooseImage = await imageSource.createPixelMap()

      // 2. 进行识别
      const request: visionBase.Request = {
        inputData: { pixelMap: this.chooseImage }
      }
      if (canIUse('SystemCapability.AI.Vision.ObjectDetection')) {
        const objectDetector = await objectDetection.ObjectDetector.create()
        const data = await objectDetector.process(request)
        this.objects = data.objects

        // 3. 绘制识别区域
        const imageInfo = await this.chooseImage.getImageInfo()
        const ratio = 320 / imageInfo.size.width
        this.canvasHeight = imageInfo.size.height * ratio
        this.canvasContext.drawImage(this.chooseImage, 0, 0, this.canvasWidth, this.canvasHeight)
        this.objects.forEach(item => {
          if (item.labels.includes(5)) {
            const box = item.boundingBox
            this.canvasContext.drawImage(this.bozaiImage, box.left * ratio - ( box.height * ratio * 0.15 ), box.top * ratio, box.height * ratio,
              box.height * ratio)
          }
          // const box = item.boundingBox
          // this.canvasContext.strokeStyle = '#FF0000'
          // this.canvasContext.strokeRect(box.left * ratio, box.top * ratio, box.width * ratio, box.height * ratio);
        })
      }
    }
  }

  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  build() {
    Column({ space: 20 }) {
      Canvas(this.canvasContext) {

      }
      .width(this.canvasWidth)
      .height(this.canvasHeight)
      .backgroundColor('#CCCCCC')

      Button('选择图片，进行识别')
        .onClick(() => {
          this.checkImage()
        })
      List({ space: 20 }) {
        ForEach(this.objects, (item: objectDetection.VisionObject) => {
          ListItem() {
            Column() {
              Text('可信度：' + item.score)
                .width('100%')
              Text('标签：' + item.labels.map(label => LabelMap[label])
                .join('，'))
                .width('100%')
              Text('尺寸：' + JSON.stringify(item.boundingBox))
                .width('100%')
            }
          }
        })
      }
      .width('100%')
      .height('100%')
      .layoutWeight(1)
    }
    .padding(15)
    .height('100%')
    .width('100%')
  }
}