?

? ? ? ? 本文可视为《用HTML5实现人脸识别》的进阶，在人脸识别的基础上，我们将使用纯Javascript来实现如下的功能：

• 识别和标注人脸以及五官

• 对人脸进行美容

?

? ? ? ??从本文的内容中，你将意识到，Javascript能做的，能实现的，远远比你想象的多。

演示

一、实现

1、人脸识别

? ? ? ??Face.com有包括检测、识别在内的多个API接口，根据《用HTML5实现人脸识别》一文，我们已经可以实现图片上传，并得到检测的结果，结果如下：

?

返回的参数

? ? ? ??返回参数的详细解释参见http://developers.face.com/docs/api/return-values/，其中tags为多张照片的识别结果，每一个结果包括了耳朵、眼睛、嘴、鼻的中心位置，以及年龄、性别、是否佩戴眼镜、情绪、是否在笑等多种信息。

? ? ? ??上传图片并请求接口的代码如下。

function buildRequest(imgSrc) {
    document.getElementById("detect").disabled = true;
    document.getElementById("beauty").disabled = true;


    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d');  

    var imgObj = new Image();  
    imgObj.src = imgSrc;  
    canvas.width = imgObj.width; 
    canvas.height = imgObj.height;  
    ctx.drawImage(imgObj, 0, 0);  
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); 

    document.getElementById("bigImg").style.width = imgObj.width;

    var data = canvas.toDataURL('image/jpeg', 1.0);  
    newblob = dataURItoBlob(data);  

    var formdata = new FormData();  
    fo