用Javascript实现人脸美容

最新推荐文章于 2021-06-07 11:55:25 发布

蒋宇捷

最新推荐文章于 2021-06-07 11:55:25 发布

阅读量8.1k

点赞数 1

分类专栏：前端应用开发 Web前端-关注HTML5与CSS3 文章标签： javascript 人脸识别 function html5 div dst

本文链接：https://blog.csdn.net/hfahe/article/details/7495042

版权

本文介绍了如何使用纯Javascript结合Face.com API实现人脸识别和美容功能，包括五官标注、增加亮度和模糊效果。通过HTML5和Canvas技术，详细阐述了美容效果的实现过程，同时探讨了可能的优化和扩展应用。

摘要由CSDN通过智能技术生成

本文可视为《用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 formdat