资讯专栏INFORMATION COLUMN

canvas之人脸美白

lbool / 1066人阅读

摘要:下面就讲解一下,移动端上传照片,旋转,抠图以及图片美白效果原理。

下面就讲解一下,移动端上传照片,旋转,抠图,以及图片美白效果原理。

一、上传照片

下面是两种上传照片的方法

1、此方法被废弃,希望能给大家一点提示,和思考的空间

a、通过改变file的值获取图片路径,并把路径添加到img元素中,在页面中展示

b、图片上传,可以用form表单上传,但是获取不到返回值,可以用ajaxfileupload.js上传
    
    

2、通过canvas画布上传照片,此方法被推荐

 a、照片展示,通过file获取图片路径,画到canvas上,在用base64转化一下

 b、上传图片,通过ajax post上传
    
    
    
    
总结:之所以先第二种方案,因为第一种方法,直接上传最原始图片,图片尺寸大小都会影响服务器的速度,而且图片太大会导致上传失败,而用canvas先缩放图片尺寸大小,可以很好的完成上传
二、旋转图片

在上传过程中,如果不对图片进行处理,会因为拍摄角度,图片展示效果不会达到预期效果,而且不会进行五官识别
此方法主要借助exif.js获取照片拍摄角度进行旋转

checkImgAngel=function(n,m,h){
    EXIF.getData(n, function () {
        EXIF.getAllTags(n);
        var  imgOrient= EXIF.getTag(n, "Orientation");
        switch(imgOrient){
            case 6://需要顺时针(向左)90度旋转
                rotateImg(n,"left");
                break;
            case 8://需要逆时针(向右)90度旋转
                rotateImg(n,"right");
                break;
            case 3://需要180度旋转
                rotateImg(n,"right");//转两次
                rotateImg(n,"right");
                break;
        }
    })
}
function rotateImg(img, direction) {
    var canvas = document.createElement("canvas")
    var ctx = canvas.getContext("2d")
    $(document.body).append(canvas)

    var min_step = 0;
    var max_step = 3;
    if (img == null)return;
    var height = img.height;
    var width = img.width;
    var step = 2;
    if (step == null) {
        step = min_step;
    }
    if (direction == "right") {
        step++;
        step > max_step && (step = min_step);
    } else {
        step--;
        step < min_step && (step = max_step);
    }

    //旋转角度以弧度值为参数
    var degree = step * 90 * Math.PI / 180;
    var ctx = canvas.getContext("2d");
    switch (step) {
        case 0:
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0);
            break;
        case 1:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(degree);
            ctx.drawImage(img, 0, -height);
            break;
        case 2:
            canvas.width = width;
            canvas.height = height;
            ctx.rotate(degree);
            ctx.drawImage(img, -width, -height);

            break;
        case 3:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(degree);
            ctx.drawImage(img, -width, 0);

            break;
    }
}
三、人脸抠图

此效果需要借助腾讯优图API完成,腾讯优图会提供人脸五官坐标,通过canvas的clip()方法,对人脸进行抠图

function drawLine(data,status){
    var data = setData1(data,status)//接口返回数据并处理
    ctx.save();
    var len=data.length
    ctx.beginPath();
    ctx.moveTo(data[0].x,data[0].y)
    for(var i=1;i

注意:因为返回的坐标并不全是五官的轮廓坐标,所以需要开发人员先对数据进行处理,剔除不需要的坐标

四、人脸美白

主要原理是canvas的getImageData方法,获取到每一个像素点的rgba值,进行运算,在通过putImageData方法,重新渲染图片,先通过isPointInPath方法,把需要美白的部分点push到一个数组中

对脸部点进行处理,push到imgDataArr数组中

var imgDataArr=[]
function drawLine(data,status){
    var data = setData1(data,status)//接口返回数据并处理
    var len=data.length
    ctx.beginPath();
    ctx.moveTo(data[0].x,data[0].y)
    for(var i=1;i

通过接口返回的脸部五官数据获取像素点,通过drawLine()在canvas上画出脸部模型,在通过isPointInPath方法,收集脸部数据

美白效果

function setImagedata(){
    var imgData = ctx.getImageData(0,0,canvas.width,canvas.height)
    for(var i= 0 ;i           
               
                                           
                       
                 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105961.html

相关文章

  • 人脸识别和语音识别智能照相机

    摘要:语音识别,语义理解一站式解决之智能照相机人脸识别如果有代码排版和图片显示问题,请访问博客。前面写了两篇语音识别,语义理解的博文,分别是语音在线听书和语音记帐软件,本篇是语音智能照相机。 语音识别,语义理解一站式解决之智能照相机(人脸识别,olami) 如果有代码排版和图片显示问题,请访问CSDN博客。转载请注明CSDN博文地址:http://blog.csdn.net/ls0609/a...

    jonh_felix 评论0 收藏0
  • 前端人脸检测指南

    摘要:的发布已经有一些时日,其主要的提供的能力是给予前端直接可用的特征检测的接口包括条形码人脸文本检测。本文将简单的对其进行介绍,对前端进行人脸检测进行普适性的讲解。 Shape Detection API 的发布已经有一些时日,其主要的提供的能力是给予前端直接可用的特征检测的接口(包括条形码、人脸、文本检测)。本文将简单的对其进行介绍,对前端进行人脸检测进行普适性的讲解。(本文不讲算法~望...

    dockerclub 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<