Hbuilder开发app实战-识岁06-face++的js实现【完结】

前言

因为识岁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

时间: 2024-10-12 21:07:42

Hbuilder开发app实战-识岁06-face++的js实现【完结】的相关文章

Hbuilder开发app实战-识岁01-actionsheet实例

前言 之前写了HBuilder开发App入门-滴石,相信大家看完后应该可以入门了, 之后会做一些简单的app,把nativejs一些常用的功能都过一遍,这样以后做app就没什么难的了. 识岁 借助与face++的接口,做了一个人脸识别app,准确性和微软比确实差点, 主要用到了: 1.actionsheet的原生实现 2.选择本地照片 3.使用摄像头拍照 4.使用uploader上传文件 5.调用face++接口进行人脸识别 6.七牛云上传的实现 actionsheet 实现 actionshe

Hbuilder开发app实战-识岁03-文件上传

前言 做app不得不谈的问题就是文件上传.用hbuilder开发app让上传变的非常easy. Uploader Uploader模块管理网络上传任务,用于从本地上传各种文件到server,并支持跨域訪问操作. 通过plus.uploader可获取上传管理对象. Uploader上传使用HTTP的POST方式提交数据,数据格式符合Multipart/form-data规范.即rfc1867(Form-based File Upload in HTML)协议. 很多其它内容:Uploader 代码

HBuilder开发App教程06-首页

实战 前面几节基本是一些概念的普及, 正如前面提到的,本教程会以滴石作为范例进行解说, 有兴趣的能够先行下载体验一下.或者下载源代码研究下. 新建项目 打开HBuilder,在项目管理器中右键--新建--移动app,或者直接ctrl+n,a, 见到例如以下界面.填入项目名称,选择mui项目. 新建完毕后.默认生成的文件夹例如以下.基本和前端开发的文件夹结构类似. 连接手机 本教程临时以android为例,最后会另外解说ios手机的开发,大同小异. 用数据线连接android手机,将手机中的设置-

HBuilder开发App教程01-推开前端开发App的大门

奇妙的前端,奇妙的js 众所周知,自从js有nodejs后,前端人员可以华丽的转身,去开发高并发非阻塞的服务端程序, 随着html5的出现,伴随一些amazing的特性,h5开发app的技术越发的成熟, 自从2008年国外推出phonegap后,前端人员又踏上开发app的路程, 今年来国内也对应推出了一些可以让前端人员开发app的ide, 不过大部分是收费的,强定制的,这里就不一一列举了. 这里推荐DCloud推出的HBuilder,一句话谁用谁知道. 一次开发两种app 通过HBuilder的

HBuilder开发App教程04-最难搞定的是mui

前言 前几篇说到一些HBuilder开发app的基础教程, 现在来说一下HBuilder开发app的难点,或者说是上手的难点, 就是mui, 如果你没有研究mui就贸然的上手HBuilder,那你的开发过程是痛苦的, 花一点时间研究下mui,对你之后开发app有很大的帮助. 网址 教程再好,也会有疏漏的地方,还需要你仔细阅读官方文档, 附地址:http://dcloudio.github.io/mui/ init mui封装了很多常用的页面方法,都需要在init中设置,例如: 1.和上拉加载,下

HBuilder开发App教程07-列表页

说明 接着上节的内容,本节讲首页的list页面, 如果看过上一节你就会明白"首页"是由只有头部的index页面和列表list页面组成的, 本节涉及到: 1.几种页面的打开方式 2.websql的应用 3.页面内容的加载 4.页面实现 几种页面打开方式 如果看过以前的章节你会明白,在Hbuilder,mui中需要放弃href跳转, 而专用mui自带的页面打开方式,为什么?请浏览:http://ask.dcloud.net.cn/article/122 这里大概讲一下,详细讲解请关注下一节

HBuilder开发App教程08-几种页面打开方式

说明 上节说了list页面的实现,其中关于几种页面的打开方式没有详细述说, 本节详细述说下几种页面打开方式的区别. 几种打开页面的方式 1.初始化时创建子页面 2.直接打开新页面 3.预加载页面 示例 1.初始化时创建子页面 mui.init({ subpages: [{ url: your - subpage - url, //子页面HTML地址,支持本地地址和网络地址 id: your - subpage - id, //子页面标志 styles: { top: subpage - top

HBuilder开发App教程09-侧滑菜单

侧滑菜单 功能 上节讲到了列表页,这节讲一个比较常用的功能,侧滑菜单, 在本app中策划菜单用来记录已经完成的事项. 实现方式 用Hbuilder实现类似侧滑菜单这样原生app功能,一般有两种实现方式,详见:这里. 一是webview实现,二是div模拟实现, 两者的区别是div实现简答,但是偶尔效果不是很好, 而webview实现稍微复杂,页面传值也复杂,但是效果好点,一般推荐webview实现方式. index.html 代码 index.js中需要添加如下代码, var main = nu

HBuilder开发App教程10-完成事项

回顾 回顾一下之前的要点: 1.Hbuilder创建项目,真机调试 2.首页 3.列表页 4.侧滑菜单 5.websql 6.几种页面打开的方式 再讲下本节的要点: 1.fire方式页面间传值 2.再讲websql 完成事项 功能描述 左滑待办事项会出现完成按钮,点击按钮会将待办事项完成,并加入侧滑菜单, 过程 1.左滑出现完成按钮 2.点击按钮后将事项从待办表中删除 3.同时将事项加入完成表中 4.侧滑菜单显示完成事项 页面 涉及两个页面,一个是list,一个是menu, 为了让操作更流畅,所