日期:2014-05-16  浏览次数:20485 次

用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();  
    fo