华为HiAI Engine入门与实战（1）-人脸检测和五官特征检测

1． 引言

华为HiAI Engine提供了免费的人脸识别、自然语言处理等多种AI能力，而且还可以在快应用中使用，您可以轻松将多种AI能力和APP或快应用相结合，让您的APP或快应用更加智能强大。最重要的是华为的HiAI Engine是离线的，用户的数据始终都在他们自己的手机上面，不需要担心隐私泄露的问题，可以放心使用。

本次先介绍一下HiAI Engine的人脸检测和五官特征检测两项能力。人脸检测可以检测图片中的人脸并返回高精度人脸坐标('faceRect':{'top':114,'left':126,'width':317,'height':380})，可应用于人脸解锁、人脸聚类等应用场景,本次实现效果图如下所示。

五官特征检测可以检测人脸五官轮廓位置的关键点坐标（目前提供68个landmark点），比如[{'type':-1,'positionF':{'x':157.42664,'y':261.62622}}, …… ]，可应用于人脸美颜、人脸建模等应用场景。本次实现效果图如下所示：

2． 接入准备

人脸检测和五官特征检测两个接口在快应用中使用很简单，只需要开发者在华为快应用官网下载华为快应用IDE,然后就可以根据华为HiAI开发指南进行开发了。目前使用华为快应用IDE开发HiAI的能力只需完成一下两步即可开始代码编写，具体如下：

1) manifest配置文件增加如下配置：{'name': 'system.ai'}。

2) 导入AI模块，如：import ai from '@system.ai或 var ai = require('@system.ai ')。

3． 代码实现

代码编写先是完成界面部分，然后实现HiAI接口功能，界面实现可以参考快应用开发指南，这里详细介绍一下HiAI中人脸检测、五官特征检测接口的实现，具体如下：

1、人脸检测

本接口可检测图片中的人脸，并返回高精度人脸矩形框坐标以及人脸个数，具体步骤如下：

第一步：获取图片资源的uri。

第二步：针对较大分辨率的图片进行压缩处理。

第三步：调用AI中人脸检测接口，代码实现如下所示。

（1）获取图片资源uri有两种方式，一种是获取手机相册图片uri，另一种是通过手机相机拍照获取图片uri，实现方法如下：

//在手机相册中选择图片

pickphotobtn: function () {

var that = this;

return new Promise(function (resolve, reject) {

media.pickImage({

success: function (data) {

//获取图片原始尺寸

console.log('pickphoto completion')

image.getImageInfo({

uri: data.uri,

success: function (imageInfo) {

//调用promise的回调函数resolve将图片信息提供给then方法

resolve(imageInfo);

},

fail: function (imageInfo, code) {

console.log('imageInfo:' + imageInfo, 'code:' + code);

}

})

},

})

});

},

//获取拍照的原始图片路径

takephotobtn: function () {

return new Promise(function (resolve, reject) {

media.takePhoto({

success: function (data) {

//获取图片原始尺寸

console.log('takephoto完成')

image.getImageInfo({

uri: data.uri,

success: function (imageInfo) {

//调用promise的回调函数resolve将图片信息提供给then方法

resolve(imageInfo);

},

fail: function (imageInfo, code) {

console.log('imageInfo: ' + imageInfo,

'code: ' + code);

}

})

},

})

});

},

（2）压缩图片

//压缩图片

compressImagebtn: function (uri, quality, ratio) {

return new Promise(function (resolve, reject) {

//缩放图片，quality代表图片质量，ratio代表需要压缩比例

image.compressImage({

uri: uri,

quality: quality,

ratio: ratio ? ratio : undefined,

format: 'JPEG',

success: function (compressedImgInfo) {

//获取经过压缩后的图片信息

image.getImageInfo({

uri: compressedImgInfo.uri,

success: function (imageInfo) {

if (imageInfo.height % 2 != 0) {

//对图片按顺序执行编辑操作

image.applyOperations({

uri: imageInfo.uri,

//图片裁剪

operations: [

{

action: 'crop',

width: imageInfo.width,

height: imageInfo.height - 1

}],

quality: 70,

format: 'JPEG',

success: function (data) {

//图片裁剪之后再次获取图片信息，

同时调用Promise回调函数resolve

image.getImageInfo({

uri: data.uri,

success: function (operationImgInfo) {

//调用promise的回调函数resolve

将图片信息提供给then方法

resolve(operationImgInfo);

},

fail: function (operationImgInfo, code) {

console.log('handling fail, code=' + code);

}

})

},

fail: function (data, code) {

console.log('handling fail, code=' + code);

}

})

} else {

console.log('不剪裁');

//调用promise的回调函数resolve将图片信息提供给then方法

resolve(imageInfo);

}

},

fail: function (imageInfo, code) {

console.log('getImageInfo fail, code='+ code);

reject(imageInfo);

}

})

},

fail: function (compressedImgInfo, code) {

console.log('compressImagebtn fail, code=' + code);

}

})

});

},

（3）调用人脸检测接口

detectFace: function () {

var that = this;

var tempList = [];

//获取画布和上下文

var clearRect = that.$element('canvas');

var ctx = clearRect.getContext('2d');

//清除画布

ctx.clearRect(0, 0, that.screenWidth, 800);

//调用人脸检测接口

ai.detectFace({

uri: that.imageUri,

success: function (data) {

that.pointArray = data.faces;

//将人脸个数参数添加到数组中，用于分析结果展示

var faceNumber = '人脸个数： ' + data.faces.length;

tempList.push(faceNumber);

that.result_list = tempList;

},

fail: function (data, code) {

console.log('handling fail, code: ' + code)

var failCode = '错误码： ' + errCodeList[code];

that.result_list.push(failCode);

},

complete: function () {

console.log('handling complete')

//根据接口返回的人脸区域坐标标记人脸区域

var cans = that.$element('canvas');

var ctx = cans.getContext('2d');

//在画布中画出人脸区域

for (var i = 0; i < that.pointArray.length; i++) {

ctx.strokeStyle = '#00ffff';

ctx.lineWidth = 5;

ctx.strokeRect(that.pointArray[i].faceRect.left,

that.pointArray[i].faceRect.top,

that.pointArray[i].faceRect.width,

that.pointArray[i].faceRect.height);

}

}

})

},

2、五官特征检测

本接口可以根据输入的图像uri进行人脸五官特征检测，返回代表五官轮廓位置的关键点，目前提供了68个landMark点，为人脸美颜、人脸建模等后续算法进一步处理提供输入。具体实现步骤如下：

第一步：先获取图片资源uri。

第二步：针对分辨率大的图片进行压缩处理。

第三步：调用AI中人脸检测接口。

其中前两步代码实现和人脸检测一样，可以参考上面人脸检测前两步的代码，下面主要介绍一下五官特征检测接口的实现，代码实现如下：

（1） 调用五官特征检测接口

//人脸五官特征方法

detectFaceLand: function () {

var that = this;

var tempList = [];

//获得画布

var clearRect = that.$element('canvas');

var ctx = clearRect.getContext('2d');

//清除画布里的内容

ctx.clearRect(0, 0, that.screenWidth, 800);

//调用五官检测特征接口，获取五官特征的68个landmark点

ai.detectFaceLandMark({

uri: that.imageUri,

success: function (data) {

//接口调用成功，返回68个landmark点，将其存放在一

个数组中，供下面绘制点时使用

that.pointArray = data.marks;

},

fail: function (data, code) {

console.log('handling fail, code: ' + code)

var co = '错误码: ' + errCodeList[code];

tempList.push(co);

},

complete: function (msg) {

console.log('detect_face_land_mark handling complete');

//根据接口返回的68个landmark点标记脸部轮廓位置

var cans = that.$element('canvas');

var ctx = cans.getContext('2d');

for (var i = 0; i < that.pointArray.length; i++) {

ctx.beginPath();

ctx.arc(that.pointArray[i].positionF.x, that.pointArray[i].positionF.y, 3, 0, 2 * Math.PI);

ctx.strokeStyle = '#00ffff';

ctx.fillStyle = '#00ffff';

ctx.fill();

}

}

})

}

开发者可以根据返回的五官特征点位置继续进行针对性的美颜处理，本示例中没有进行美颜处理，只是对landmark点进行标记。

4． 总结

至此，介绍快应用接入华为HiAI的人脸检测以及五官特征检测两个能力已经描述完了，本次只介绍人脸检测和五官特征检测两个能力，后续将会将其他关于华为HiAI的能力也介绍给大家，如：人脸属性、人脸解析、图像识别、自然语言处理等十几种能力。本次介绍的两个能力源码在github上有上传，大家可以点击下载去看一下。

除此之外，华为还提供了Android端的HiAI,本次分享没有介绍，有兴趣的朋友可以去华为开发者网站看看关于Android端HiAI。