• 技术文章 >微信小程序 >小程序开发

    微信小程序怎么实现人脸识别

    不言不言2018-06-22 16:21:48原创7064
    这篇文章主要为大家详细介绍了微信小程序实现人脸识别,实现添加信息和上传照片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    本文为大家分享了微信小程序人脸识别的具体代码,供大家参考,具体内容如下

    首先,我们要有开发者工具,今天所说的是后端和前端联合起来实现的。

    在PHP的控制器中写一个upload方法,代码如下:

    public function upload($id=''){ 
     if(empty($id)){ 
      return false; 
     } 
     
     $no = M("student")->where("id={$id}")->getField('no'); 
     $dir = "./Upload/studentface/"; 
     if(!file_exists($dir)){ 
      mkdir($dir, 0777, true); 
     } 
     $upload = new \Think\Upload();// 实例化上传类 
     $upload->maxSize = 3145728 ;// 设置附件上传大小 
     $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型 
     $upload->rootPath = $dir; // 设置附件上传根目录 
     $upload->savePath = ''; // 设置附件上传(子)目录 
     $upload->saveName = $no; 
     $upload->replace = true; 
     $upload->autoSub = false; 
     // 上传文件 
     $info = $upload->uploadOne($_FILES['file']); 
     if(!$info) {// 上传错误提示错误信息 
      // return $this->ajaxReturn(array('error'=>true,'msg'=>$upload->getError())); 
      return json_encode(array('error'=>true,'msg'=>$upload->getError()),JSON_UNESCAPED_UNICODE); 
     }else{// 上传成功 获取上传文件信息 
      // return $this->ajaxReturn(array('error'=>false,'msg'=>$info['savepath'].$info['savename'],'id'=>$id)); 
      $file = $dir . $info['savepath'] . $info['savename']; 
      $image = base64_encode(file_get_contents($file)); 
      $this->facevalid($no,$image); 
     
      $m = M('head'); 
      $data = $m->where("no='{$no}'")->find(); 
     
      if($data){ 
      //有数据,则更新 
      $m->where("no='{$no}'")->save(array('base64'=>$image, 'path'=>$file)); 
      }else{ 
      $m->add(array('no'=>$no,'base64'=>$image,'path'=>$file)); 
      } 
     
      return "采集照片成功"; 
     } 
    }

    public function facevalid($no,$image,$file){ 
     
     $options = array(); 
     
     $options["max_face_num"] = 2; 
     // $options["face_type"] = "LIVE"; 
     
     // $image=file_get_contents($file); 
     // $image=base64_encode($image); 
     // echo $image; 
     $imageType="BASE64"; 
      
     // 带参数调用人脸检测 
     $client=$this->init_face(); 
     $ret=$client->detect($image,$imageType,$options); 
     // $arr=$ret; 
     // print_r($ret); 
     // exit; 
     if($ret['error_code']==0){//有人脸 
      $result=$ret['result']; 
      $face_num=$result['face_num']; 
     
      if(1==$face_num){//人脸数量为1 
      $face_probability=$result['face_list'][0]['face_probability']; 
      if(1==$face_probability){//可靠性为1 
       $group=$this->face_group(); 
       
       // echo $group; 
       // exit; 
       $faces=$client->faceGetlist($no,$group); 
       if($faces['error_code']>0){ 
       $client->addUser($image,'BASE64',$group,$no); 
       }else{ 
       $client->updateUser($image,'BASE64',$group,$no); 
       } 
       // echo '人脸检测完成,并已入库'; 
       // return true; 
       // $arr = array('error'=>false,'msg'=>'上传成功'); 
       
      }else{ 
      die('图片质量'); 
       // die('图片质量仅为:'.$face_probability.',上传失败'); 
      } 
      }else{ 
      die('人脸数量大于1'); 
      // die('人脸数量大于1,失败'); 
      } 
     }else{ 
      die('没有人脸'); 
      // die('没有人脸,失败'); 
     } 
     }

    在前端我们需要在开发者工具里写js和wxml.

    js代码如下:

    const app = getApp() 
    Page({ 
     data: { 
     sex: '女', 
     empty:true 
     }, 
     cancel: function () { 
     wx.redirectTo({ 
     url: '../face/face', 
     }) 
     }, 
     
     switch1Change: function (e) { 
     if (e.detail.value) { 
     this.setData({ sex: '男' }) 
     } else { 
     this.setData({ sex: '女' }) 
     } 
     }, 
     formSubmit: function (e) { 
     // console.log(e); 
     wx.request({ 
     url: 'http://*****.top/ppp/server/index.php/home/index/index', 
     data: e.detail.value, 
     method: 'POST', 
     header: { 
     'content-type': 'application/x-www-form-urlencoded' 
     }, 
     success: (res) => { 
     console.log(res.data); 
      
     if (res.data.error) { 
      wx.showToast({ 
      title: res.data.msg, 
      icon: 'none', 
      duration: 2000 
      }) 
     } else { 
      wx.showToast({ 
      title: res.data.msg, 
      icon: 'success', 
      duration: 2000 
      }) 
      
      setTimeout(function () { 
      wx.navigateTo({ 
      url: '../headimg/headimg?id=' + res.data.id, 
      }) 
      }, 2000) 
      
     } 
      
     } 
     
     }) 
     
     } 
      
    })

    上传图片js代码如下:

    const app = getApp() 
    function upload(that, id) { 
     if (that.data.files.length == 0) { 
     return; 
     } 
     wx.uploadFile({ 
     url: 'http://****.top/ppp/server/index.php/home/index/upload', //仅为示例,非真实的接口地址 
     filePath: that.data.files[0], 
     name: 'file', 
     formData: { 
     'id': id 
     }, 
     success: function (res) { 
     var data = res.data 
     // var json = JSON.parse(data) 
     console.log(data) 
     wx.showToast({ 
     title: data, 
     icon:'success', 
     duration:2000 
     }) 
     setTimeout(function () { 
     wx.navigateTo({ 
      url: '../index/index', 
     }) 
     }, 2000) 
     } 
     }) 
    } 
    Page({ 
     chooseImage: function (e) { 
     var that = this; 
     wx.chooseImage({ 
     count: 1, 
     sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 
     sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 
     success: function (res) { 
     console.log(res) 
     // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 
     that.setData({ 
      files: res.tempFilePaths, 
     }); 
     } 
     }) 
     }, 
     //预览照片 
     previewImage: function () { 
     var current = e.target.dataset.src 
     wx.previewImage({ 
     current: current, 
     urls: this.data.imageList 
     }) 
     }, 
     
     cancel:function(){ 
     wx.redirectTo({ 
     url: '../index/index', 
     }) 
     }, 
     /** 
     * 页面的初始数据 
     */ 
     data: { 
     files: [], 
     options:null, 
     id:null, 
     }, 
     formSubmit:function(e){ 
     upload(this,this.data.id); 
     }, 
     /** 
     * 生命周期函数--监听页面加载 
     */ 
     onLoad: function (options) { 
     console.log(options); 
     this.setData({options:options}) 
     this.setData({ id: options.id }) 
     }, 
     
     /** 
     * 生命周期函数--监听页面初次渲染完成 
     */ 
     onReady: function () { 
     
     }, 
     
     /** 
     * 生命周期函数--监听页面显示 
     */ 
     onShow: function () { 
     
     }, 
     
     /** 
     * 生命周期函数--监听页面隐藏 
     */ 
     onHide: function () { 
     
     }, 
     
     /** 
     * 生命周期函数--监听页面卸载 
     */ 
     onUnload: function () { 
     
     }, 
     
     /** 
     * 页面相关事件处理函数--监听用户下拉动作 
     */ 
     onPullDownRefresh: function () { 
     
     }, 
     
     /** 
     * 页面上拉触底事件的处理函数 
     */ 
     onReachBottom: function () { 
     
     }, 
     
     /** 
     * 用户点击右上角分享 
     */ 
     onShareAppMessage: function () { 
     
     } 
    })

    wxml代码如下:

    <view class="weui-cells__title text">录入学生信息</view> 
    <form bindsubmit="formSubmit"> 
     <view class="weui-cells weui-cells_after-title"> 
     <view class="weui-cell weui-cell_input"> 
     <view class="weui-cell__hd"> 
      <view class="weui-label">学号</view> 
     </view> 
     <view class="weui-cell__bd"> 
      <input class="weui-input" placeholder="请输入学号" value='1635050739' name="no" /> 
     </view> 
     </view> 
     <view class="weui-cell weui-cell_input weui-cell_vcode"> 
     <view class="weui-cell__hd"> 
      <view class="weui-label">姓名</view> 
     </view> 
     <view class="weui-cell__bd"> 
      <input class="weui-input" placeholder="请输入姓名" value='小苏' name="name" /> 
     </view> 
     </view> 
     <view class="weui-cell weui-cell_input"> 
     <view class="weui-label">性别</view> 
     <input class="weui-input" name='sex' value='{{sex}}'/> 
     <view class='weui-cell_ft'> 
      <switch checked bindchange='switch1Change'></switch> 
     </view> 
     </view> 
     <view class="weui-cell weui-cell_input weui-cell_vcode"> 
     <view class="weui-cell__hd"> 
      <view class="weui-label">年龄</view> 
     </view> 
     <view class="weui-cell__bd"> 
      <input class="weui-input" placeholder="请输入年龄" value='20' name="age" /> 
     </view> 
     </view> 
     </view> 
     <view class="weui-btn-area"> 
     <button class="weui-btn" type="primary" bindtap="showTopTips" formType="submit">注册</button> 
     <button class="weui-btn" type="default" bindtap='cancel'>返回上级</button> 
     </view> 
    </form>

    上传图片wxml代码如下:

    <view class="page" xmlns:wx="http://www.w3.org/1999/xhtml"> 
    <view class="weui-cells__title text">图像采集</view> 
    <view class="weui-cells__title text">{{options.name}} {{options.no}}</view> 
    <form bindsubmit="formSubmit"> 
    <view class="page__bd"> 
     <view class="weui-cells"> 
      <view class="weui-cell"> 
      <view class="weui-cell__bd"> 
       <view class="weui-uploader"> 
       <view class="weui-uploader__hd"> 
        <view class="weui-uploader__title">图片上传</view> 
        <view class="weui-uploader__info">{{files.length}}/1</view> 
       </view> 
       <view class="weui-uploader__bd"> 
        <view class="weui-uploader__files" id="uploaderFiles"> 
        <block wx:for="{{files}}" wx:key="*this"> 
         <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}"> 
         <image class="weui-uploader__img" src="{{item}}" mode="aspectFill"/> 
         </view> 
        </block> 
        </view> 
        <view class="weui-uploader__input-box"> 
        <view class="weui-uploader__input" bindtap="chooseImage"></view> 
        </view> 
       </view> 
       </view> 
      </view> 
      </view> 
     </view> 
     </view> 
     <view class="weui-btn-area"> 
      <button class="weui-btn" type="primary" form-type="submit">确认</button> 
      <button class="weui-btn" type="default" bindtap='cancel'>取消</button> 
     </view> 
     </form> 
    </view>

    以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

    相关推荐:

    微信小程序中跳转页面的两种方法

    微信小程序实现登录页云层漂浮的动画效果

    php入门到就业线上直播课:查看学习

    以上就是微信小程序怎么实现人脸识别的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    上一篇:关于微信小程序的配置 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 微信小程序常用API(总结分享)• 微信小程序实例介绍之列表渲染• 十分钟搞定小程序的条件渲染• 微信小程序window导航栏配置(实例详解)• 微信小程序开发之宿主环境详解
    1/1

    PHP中文网