1. 程式人生 > >Hbuilder開發app實戰-識歲06-face++的js實現【完結】

Hbuilder開發app實戰-識歲06-face++的js實現【完結】

4.png

前言

由於識歲app比較簡單,所以這節就完結吧,

當然還有一些可以優化完善的地方,但是個人興趣不是很大,

有想繼續完善的,原始碼在這裡:https://github.com/uikoo9/shisui


face++

在簡單的介紹下face++,

不久前,微軟推出了一個識別人年齡的網站:http://how-old.net/

不得不說微軟的演算法牛逼,資料海量,本人測試的時候很準確。

但是據說要借入微軟的介面比較麻煩,就找了一個國內的類似介面,face++,

官網宣稱,很多國內的app都在使用,例如美圖秀秀等,

暫且哪來用一用,

效果嘛,

很多時候都不好,會提示找不到人臉,用官網的示例測試了下,確實是這樣,而不是本人的使用方法有誤,

官網示例:http://www.faceplusplus.com.cn/demo-detect/


face++的js實現

雖然效果不好,但是還得用。。

首先來到開發者中心:http://www.faceplusplus.com.cn/uc_home/

也就是文章頂部的圖片,看到,需要進行一些註冊,比較簡單,略過。

再然後找到api,發現一個需要的介面,識別人臉:http://www.faceplusplus.com.cn/detection_detect/

這個介面的必須引數是ak,sk,url,

至於img直接post,我是沒有研究明白怎麼搞。


程式碼

// face pp
qiao.facepp = {
    ak : '3bbeeac39cd5e8600d2cb05ac97f15fd',
    sk : '4lf9qM6e7GVLVAfKYITYx9R7GX6_5Taa'
};
qiao.facepp.do = function(options){
    var url = options.url; 
    var attr = options.attr || 'gender,age';
    var method = options.method || 'detection/detect';
    var success = options.success;
    var fail = options.fail;
    new FacePP(qiao.facepp.ak, qiao.facepp.sk).request(method, {
      url: url,
      attribute: attr
    }, function(err, result) {
        if(err){
            fail();
        }else{
            success(result);
        }
    });
};

程式碼比較簡單

qiao.facepp,初始化資訊,也就是你的ak,sk

qiao.facepp.do,開始訪問介面,這裡只需要傳入圖片的url地址即可。


識歲程式碼

function facepp(){
    if(url){
        qiao.facepp.do({
            url : url,
            success : function(result){
                if(result && result.face && result.face.length){
                    var face = result.face[0].attribute;
                    var str = '識別成功!性別:' + (face.gender.value == 'Male' ? '男':'女') + ',年齡:' + face.age.value;
                    showRes(str);
                }else{
                    showRes('識別失敗,請上傳包含人臉的圖片!');    
                }
            },
            fail : function(){
                showRes('識別失敗,請重試!');
            }
        });
    }
}
function showRes(msg){
    $('#res').text(msg);
    endw();
}
function beginw(){
    $('#faceBtn').attr('disabled', true);
    qiao.h.waiting();
}
function endw(){
    qiao.h.closeWaiting();
    $('#faceBtn').attr('disabled', false);
}

接上幾節的程式碼,

1.首先點選圖片,彈出actionsheet——第一節

2.選擇相片或者拍照然,也就是Camera和gallery元件——第二節

3.檔案上傳,Uploader元件——第三節

4.上傳到七牛雲,需要獲得uptoken——第四,五節

5.利用face++進行之別,也就是本節


更多教程:

Hbuilder開發App實戰1-識歲:http://uikoo9.com/book/detail/5

更多學習筆記:http://uikoo9.com/book