用Javascript实现人脸美容

 

        本文可视为《用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();  
    formdata.append("api_key", "your key");  
    formdata.append("api_secret", "your secret");  
    formdata.append("filename","avatar.jpg");  

    formdata.append("file",newblob);   

    $.ajax({  
       url: 'http://api.face.com/faces/detect.json?attributes=age_est,gender,mood,smiling,glasses',  
       data: formdata,  
       cache: false,  
       contentType: false,  
       processData: false,  
       dataType:"json",  
       type: 'POST',  
       success: function (data) {  
           handleResult(data.photos[0]);  
       }
    }); 
}

  人脸标注

        我们将根据人脸识别的结果对五官和面部进行标注。标注的方式有两种，一种是基于Canvas的绘图，一种是传统DIV方式标注。下面我们采用第二种方式，原理是在各个点上画一个3*3的DIV，DIV的背景色为红色，采用绝对定位。接口返回的五官数值为宽高所在点的百分比值，所以需要先进行换算。

        标注五官的方法如下：

function drawFacial(data) {
    var width = data.width;
    var height = data.height;

    var points = ["eye_left", "eye_right", "mouth_left", "mouth_center", "mouth_right", "nose", "ear_left", "ear_right"];

    for(var i = 0; i < points.length; i++) {
        var div = document.createElement('div');
        div.style.width = "3px";
        div.style.height = "3px";
        div.style.backgroundColor = "red";
        div.style.position = "absolute";
        div.className = "facePoint";

        var values = data.tags[0][points[i]];

        if(values != null) {
            var left_x = values.x;
            div.style.left = left_x * width / 100 - 1 + "px";
            var left_y = values.y;
            div.style.top = left_y * height / 100 - 1 + "px";

            document.body.appendChild(div);
        }
    }
}

 

        标注人脸区域的方法如下：

function drawFace(data) {
	var width = data.width;
	var height = data.height;

	var faceWidth = data.tags[0].width * width / 100;
	var faceHeight = data.tags[0].height * height / 100;
	var faceCenter = data.tags[0].center;

	var div = document.createElement('div');
	div.style.width = faceWidth + "px";
	div.style.height = faceHeight + "px";
	div.style.borderColor = "red";
	div.style.borderWidth = "1px";
	div.style.borderStyle = "dotted";
	div.style.position = "absolute";
	div.className = "faceBox";

	div.style.left = faceCenter.x * width / 100 - faceWidth / 2 - 1 + "px";
	div.style.top = faceCenter.y * height / 100 - faceHeight / 2 - 1 + "px";

	document.body.appendChild(div);
}

   从结果来看，Face.com的检测结果非常精准。