鸿蒙6.0开发实战：AI人脸检测技术详解

人脸检测开发实战教程：从原理到落地详解

先来聊聊人脸检测这项技术究竟能实现哪些功能。简单来说，它可以在任意图片中精准定位人脸位置、五官坐标点、面部朝向以及置信度。获取这些关键信息后，后续的美颜优化、人脸聚类分析、表情识别等应用场景就有了可靠的数据支撑。具体效果可参考下图：

典型应用场景

该能力的核心价值在于对人脸进行精确提取与定位。在实际开发中，常见用途包括人脸识别门禁系统、智能美颜相机、社交平台照片自动标记等。无论你是想要实现自动化的人脸聚类功能，还是打造精准的美颜修饰效果，人脸检测都是不可或缺的第一步，也是最关键的一步。

使用限制与注意事项

需要提前说明一个现实情况：该能力目前不支持模拟器运行，必须在真机设备上测试。同时，对输入图像也有明确的规格要求：

世界坐标系说明

为了更直观地理解人脸朝向，下面给出世界坐标系的示意图：

熟悉这个坐标系后，你对检测返回的人脸朝向数据会有更清晰的认识。

开发步骤详解

开发流程其实并不复杂，主要分为以下几个关键步骤：

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

   通过图库选择器拿到图片URI，然后调用读取接口将其转换为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 { return new Promise((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，然后调用detect接口：

   // 初始化并调用人脸检测接口 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，将上述所有步骤整合在一起：

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 { return new Promise((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的组件，包含两个状态变量chooseImage（用于存储选中的图片像素图）和dataValues（用于显示检测结果）。

3. UI构建：在build方法中，以Column布局为基础，构建了包括图片显示区域（Image组件显示chooseImage）、文本显示区域（Text组件显示dataValues）以及两个按钮的界面。

4. 按钮功能实现：

   • “选择图片”按钮点击后调用selectImage方法，通过openPhoto拉起系统图库获取图片URI，再通过loadImage加载转码。
     
   • “人脸检测”按钮点击后，先检查chooseImage是否有效，然后初始化检测器、构建VisionInfo并调用faceDetector.detect进行检测，结果通过状态变量dataValues展示。

5. 图片选择逻辑：selectImage方法内部调用openPhoto获取URI后交给loadImage处理。openPhoto使用PhotoViewPicker的select方法，限定只选择单张图片并返回URI。

6. 图片加载逻辑：loadImage方法使用fileIo.open打开文件描述符，据此创建ImageSource对象，再调用createPixelMap生成像素图，最终赋值给状态变量。

7. 错误处理：在各个异常点，比如文件打开失败、检测出错等，都通过hilog.error记录详细错误信息，并在catch块中妥善处理，确保应用不会因异常而崩溃。

以上就是人脸检测开发的全流程。从模块引入到界面搭建，再到核心检测调用与结果展示，每一步都有清晰的代码对应。如果你在真机上运行并选择一张包含人脸的图片，就能看到返回的人脸坐标和朝向数据——这正是后续各种人脸应用的基础。