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

Comments URL: https://news.ycombinator.com/item?id=44287330

Points: 1

# Comments: 0