适用场景

检测图片中的人脸,返回高精度人脸矩形框坐标、人脸五官位置、人脸朝向、人脸置信度。可通过对人脸的定位,实现对人脸特定位置的美化修饰。广泛应用于各类人脸识别场景,如人脸聚类、美颜等场景中。

效果如下图所示:

在这里插入图片描述

约束与限制

该能力当前不支持模拟器。

AI能力 约束
人脸检测 输入图像具有合适的成像质量(建议720p以上),224px<高度<15210px,100px<宽度<10000px,高宽比例建议10:1以下(高度小于宽度的10倍),接近手机屏幕高宽比例为宜。接口调用耗时较久,不适合在需要实时检测的场景下使用。不支持同一用户启用多个线程。

世界坐标系

以下方图片指示坐标系辅助表示人脸朝向。

在这里插入图片描述

开发步骤

  1. 在使用人脸检测时,将实现人脸检测相关的类添加至工程。

    import { faceDetector } from '@kit.CoreVisionKit';
    import { image } from '@kit.ImageKit';
    import { hilog } from '@kit.PerformanceAnalysisKit';
    import { BusinessError } from '@kit.BasicServicesKit';
    import { fileIo } from '@kit.CoreFileKit';
    import { photoAccessHelper } from '@kit.MediaLibraryKit';
    
  2. 简单配置页面的布局,并在Button组件添加点击事件,拉起图库,选择图片。

    Button('选择图片')
      .type(ButtonType.Capsule)
      .fontColor(Color.White)
      .alignSelf(ItemAlign.Center)
      .width('80%')
      .margin(10)
      .onClick(() => {
        // 拉起图库,获取图片资源
        void this.selectImage();
      })
    
  3. 通过图库获取图片资源,将图片转换为PixelMap。

    private async selectImage() {
      let uri = await this.openPhoto()
      if (uri === undefined) {
        hilog.error(0x0000, 'faceDetector', "Failed to get uri.");
      }
      this.loadImage(uri)
    }
    
    private async openPhoto(): Promise<string> {
      return new Promise<string>((resolve) => {
        let photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker();
        photoPicker.select({
          MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE, 
          maxSelectNumber: 1
        }).then(res => {
          resolve(res.photoUris[0])
        }).catch((err: BusinessError) => {
          hilog.error(0x0000, 'faceDetector', `Failed to get photo image uri.code: ${err.code}, message: ${err.message}`);
          resolve('');
        })
      })
    }
    
    private loadImage(name: string) {
      setTimeout(async () => {
        let imageSource: image.ImageSource | undefined = undefined;
        let fileSource = await fileIo.open(name, fileIo.OpenMode.READ_ONLY);
        imageSource = image.createImageSource(fileSource.fd);
        this.chooseImage = await imageSource.createPixelMap();
        this.dataValues = "";
      }, 100
      )
    }
    
  4. 实例化VisionInfo对象,并传入待检测图片的PixelMap,实现人脸检测功能。

    // 初始化并调用人脸检测接口
    void faceDetector.init();
    let visionInfo: faceDetector.VisionInfo = {
      pixelMap: this.chooseImage,
    };
    let data:faceDetector.Face[] = await faceDetector.detect(visionInfo);
    
  5. (可选)如果需要将结果展示在界面上,可以使用下列代码。

    let data:faceDetector.Face[] = await faceDetector.detect(visionInfo);
    if (data.length === 0) {
      this.dataValues = "No face is detected in the image. Select an image that contains a face.";
    } else {
      let faceString = JSON.stringify(data);
      hilog.info(0x0000, 'testTag', "faceString data is " + faceString);
      this.dataValues = faceString;
    }
    

开发实例

Index.ets

import { faceDetector } from '@kit.CoreVisionKit';
import { image } from '@kit.ImageKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { fileIo } from '@kit.CoreFileKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';

@Entry
@Component
struct Index {
  @State chooseImage: PixelMap | undefined = undefined
  @State dataValues: string = ''

  build() {
    Column() {
      Image(this.chooseImage)
        .objectFit(ImageFit.Fill)
        .height('60%')
      Text(this.dataValues)
        .copyOption(CopyOptions.LocalDevice)
        .height('15%')
        .margin(10)
        .width('60%')
      Button('选择图片')
        .type(ButtonType.Capsule)
        .fontColor(Color.White)
        .alignSelf(ItemAlign.Center)
        .width('80%')
        .margin(10)
        .onClick(() => {
          // 拉起图库
          void this.selectImage()
        })
      Button('人脸检测')
        .type(ButtonType.Capsule)
        .fontColor(Color.White)
        .alignSelf(ItemAlign.Center)
        .width('80%')
        .margin(10)
        .onClick(() => {
          if(!this.chooseImage) {
            hilog.error(0x0000, 'faceDetectorSample', "Failed to detect face.");
            return;
          }
          // 调用人脸检测接口
          void faceDetector.init();
          let visionInfo: faceDetector.VisionInfo = {
            pixelMap: this.chooseImage,
          };
          faceDetector.detect(visionInfo)
            .then((data: faceDetector.Face[]) => {
              if (data.length === 0) {
                this.dataValues = "No face is detected in the image. Select an image that contains a face.";
              } else {
                let faceString = JSON.stringify(data);
                hilog.info(0x0000, 'faceDetectorSample', "faceString data is " + faceString);
                this.dataValues = faceString;
              }
            })
            .catch((error: BusinessError) => {
              hilog.error(0x0000, 'faceDetectorSample', `Face detection failed. Code: ${error.code}, message: ${error.message}`);
              this.dataValues = `Error: ${error.message}`;
            });
          void faceDetector.release();
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  private async selectImage() {
    let uri = await this.openPhoto()
    if (uri === undefined) {
      hilog.error(0x0000, 'faceDetectorSample', "Failed to get uri.");
    }
    this.loadImage(uri);
  }

  private async openPhoto(): Promise<string> {
    return new Promise<string>((resolve) => {
      let photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker();
      photoPicker.select({
        MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
        maxSelectNumber: 1
      }).then(res => {
        resolve(res.photoUris[0])
      }).catch((err: BusinessError) => {
        hilog.error(0x0000, 'faceDetectorSample', `Failed to get photo image uri.code: ${err.code}, message: ${err.message}`);
        resolve('');
      })
    })
  }

  private loadImage(name: string) {
    setTimeout(async () => {
      let imageSource: image.ImageSource | undefined = undefined;
      try {
        let fileSource = await fileIo.open(name, fileIo.OpenMode.READ_ONLY);
        imageSource = image.createImageSource(fileSource.fd);
        this.chooseImage = await imageSource.createPixelMap();
        this.dataValues = "";
        await fileIo.close(fileSource);
      } catch (error) {
        hilog.error(0x0000, 'faceDetectorSample', `Failed to open file. Error: ${error}`);
      }
    }, 100
    )
  }
}

代码逻辑走读:

  1. 导入模块
    • 导入了多个HarmonyOS的模块,包括人脸检测、图像处理、日志记录、文件操作和媒体库。
  2. 组件定义
    • 使用@Entry@Component装饰器定义了一个名为Index的组件,该组件包含两个状态变量chooseImagedataValues
  3. UI构建
    • build方法中,使用Column布局组件构建了一个包含图片显示区域、文本显示区域和两个按钮的界面。
    • 图片显示区域使用Image组件展示chooseImage状态变量中的图片。
    • 文本显示区域使用Text组件展示dataValues状态变量的内容。
    • 两个按钮分别用于选择图片和进行人脸检测。
  4. 按钮点击事件处理
    • 选择图片按钮:点击后调用selectImage方法,该方法通过openPhoto方法拉起图库并获取图片URI,然后调用loadImage方法加载图片。
    • 人脸检测按钮:点击后检查chooseImage是否存在,如果存在则调用人脸检测API进行检测。检测结果通过dataValues状态变量展示。
  5. 图片选择逻辑
    • selectImage方法中,调用openPhoto方法拉起图库并获取图片URI,然后调用loadImage方法加载图片。
    • openPhoto方法中,创建PhotoViewPicker实例并调用其select方法选择图片,返回图片URI。
  6. 图片加载逻辑
    • loadImage方法中,使用fileIo.open方法打开图片文件,创建ImageSource实例,然后使用createPixelMap方法创建PixelMap对象,并将其赋值给chooseImage状态变量。
  7. 错误处理
    • 在各个方法中,使用hilog.error记录错误信息,并在catch块中处理可能的异常。
Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐