用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的检测结果非常精准。




?