当前位置：Gxlcms > JavaScript > 微信小程序实现人脸识别

微信小程序实现人脸识别

时间：2021-07-01 10:21:17 帮助过：985人阅读

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

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

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

  1. public function upload($id=''){ 
  2.  if(empty($id)){ 
  3.   return false; 
  4.  } 
  5.  
  6.  $no = M("student")->where("id={$id}")->getField('no'); 
  7.  $dir = "./Upload/studentface/"; 
  8.  if(!file_exists($dir)){ 
  9.   mkdir($dir, 0777, true); 
  10.  } 
  11.  $upload = new \Think\Upload();// 实例化上传类 
  12.  $upload->maxSize = 3145728 ;// 设置附件上传大小 
  13.  $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型 
  14.  $upload->rootPath = $dir; // 设置附件上传根目录 
  15.  $upload->savePath = ''; // 设置附件上传（子）目录 
  16.  $upload->saveName = $no; 
  17.  $upload->replace = true; 
  18.  $upload->autoSub = false; 
  19.  // 上传文件 
  20.  $info = $upload->uploadOne($_FILES['file']); 
  21.  if(!$info) {// 上传错误提示错误信息 
  22.   // return $this->ajaxReturn(array('error'=>true,'msg'=>$upload->getError())); 
  23.   return json_encode(array('error'=>true,'msg'=>$upload->getError()),JSON_UNESCAPED_UNICODE); 
  24.  }else{// 上传成功 获取上传文件信息 
  25.   // return $this->ajaxReturn(array('error'=>false,'msg'=>$info['savepath'].$info['savename'],'id'=>$id)); 
  26.   $file = $dir . $info['savepath'] . $info['savename']; 
  27.   $image = base64_encode(file_get_contents($file)); 
  28.   $this->facevalid($no,$image); 
  29.  
  30.   $m = M('head'); 
  31.   $data = $m->where("no='{$no}'")->find(); 
  32.  
  33.   if($data){ 
  34.   //有数据，则更新 
  35.   $m->where("no='{$no}'")->save(array('base64'=>$image, 'path'=>$file)); 
  36.   }else{ 
  37.   $m->add(array('no'=>$no,'base64'=>$image,'path'=>$file)); 
  38.   } 
  39.  
  40.   return "采集照片成功"; 
  41.  } 
  42. } 
  1. public function facevalid($no,$image,$file){ 
  2.  
  3.  $options = array(); 
  4.  
  5.  $options["max_face_num"] = 2; 
  6.  // $options["face_type"] = "LIVE"; 
  7.  
  8.  // $image=file_get_contents($file); 
  9.  // $image=base64_encode($image); 
  10.  // echo $image; 
  11.  $imageType="BASE64"; 
  12.   
  13.  // 带参数调用人脸检测 
  14.  $client=$this->init_face(); 
  15.  $ret=$client->detect($image,$imageType,$options); 
  16.  // $arr=$ret; 
  17.  // print_r($ret); 
  18.  // exit; 
  19.  if($ret['error_code']==0){//有人脸 
  20.   $result=$ret['result']; 
  21.   $face_num=$result['face_num']; 
  22.  
  23.   if(1==$face_num){//人脸数量为1 
  24.   $face_probability=$result['face_list'][0]['face_probability']; 
  25.   if(1==$face_probability){//可靠性为1 
  26.    $group=$this->face_group(); 
  27.    
  28.    // echo $group; 
  29.    // exit; 
  30.    $faces=$client->faceGetlist($no,$group); 
  31.    if($faces['error_code']>0){ 
  32.    $client->addUser($image,'BASE64',$group,$no); 
  33.    }else{ 
  34.    $client->updateUser($image,'BASE64',$group,$no); 
  35.    } 
  36.    // echo '人脸检测完成，并已入库'; 
  37.    // return true; 
  38.    // $arr = array('error'=>false,'msg'=>'上传成功'); 
  39.    
  40.   }else{ 
  41.   die('图片质量'); 
  42.    // die('图片质量仅为:'.$face_probability.',上传失败'); 
  43.   } 
  44.   }else{ 
  45.   die('人脸数量大于1'); 
  46.   // die('人脸数量大于1，失败'); 
  47.   } 
  48.  }else{ 
  49.   die('没有人脸'); 
  50.   // die('没有人脸，失败'); 
  51.  } 
  52.  }

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

js代码如下：

  1. const app = getApp() 
  2. Page({ 
  3.  data: { 
  4.  sex: '女', 
  5.  empty:true 
  6.  }, 
  7.  cancel: function () { 
  8.  wx.redirectTo({ 
  9.  url: '../face/face', 
  10.  }) 
  11.  }, 
  12.  
  13.  switch1Change: function (e) { 
  14.  if (e.detail.value) { 
  15.  this.setData({ sex: '男' }) 
  16.  } else { 
  17.  this.setData({ sex: '女' }) 
  18.  } 
  19.  }, 
  20.  formSubmit: function (e) { 
  21.  // console.log(e); 
  22.  wx.request({ 
  23.  url: 'http://*****.top/ppp/server/index.php/home/index/index', 
  24.  data: e.detail.value, 
  25.  method: 'POST', 
  26.  header: { 
  27.  'content-type': 'application/x-www-form-urlencoded' 
  28.  }, 
  29.  success: (res) => { 
  30.  console.log(res.data); 
  31.   
  32.  if (res.data.error) { 
  33.   wx.showToast({ 
  34.   title: res.data.msg, 
  35.   icon: 'none', 
  36.   duration: 2000 
  37.   }) 
  38.  } else { 
  39.   wx.showToast({ 
  40.   title: res.data.msg, 
  41.   icon: 'success', 
  42.   duration: 2000 
  43.   }) 
  44.   
  45.   setTimeout(function () { 
  46.   wx.navigateTo({ 
  47.   url: '../headimg/headimg?id=' + res.data.id, 
  48.   }) 
  49.   }, 2000) 
  50.   
  51.  } 
  52.   
  53.  } 
  54.  
  55.  }) 
  56.  
  57.  } 
  58.   
  59. })

上传图片js代码如下：

  1. const app = getApp() 
  2. function upload(that, id) { 
  3.  if (that.data.files.length == 0) { 
  4.  return; 
  5.  } 
  6.  wx.uploadFile({ 
  7.  url: 'http://****.top/ppp/server/index.php/home/index/upload', //仅为示例，非真实的接口地址 
  8.  filePath: that.data.files[0], 
  9.  name: 'file', 
  10.  formData: { 
  11.  'id': id 
  12.  }, 
  13.  success: function (res) { 
  14.  var data = res.data 
  15.  // var json = JSON.parse(data) 
  16.  console.log(data) 
  17.  wx.showToast({ 
  18.  title: data, 
  19.  icon:'success', 
  20.  duration:2000 
  21.  }) 
  22.  setTimeout(function () { 
  23.  wx.navigateTo({ 
  24.   url: '../index/index', 
  25.  }) 
  26.  }, 2000) 
  27.  } 
  28.  }) 
  29. } 
  30. Page({ 
  31.  chooseImage: function (e) { 
  32.  var that = this; 
  33.  wx.chooseImage({ 
  34.  count: 1, 
  35.  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 
  36.  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 
  37.  success: function (res) { 
  38.  console.log(res) 
  39.  // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 
  40.  that.setData({ 
  41.   files: res.tempFilePaths, 
  42.  }); 
  43.  } 
  44.  }) 
  45.  }, 
  46.  //预览照片 
  47.  previewImage: function () { 
  48.  var current = e.target.dataset.src 
  49.  wx.previewImage({ 
  50.  current: current, 
  51.  urls: this.data.imageList 
  52.  }) 
  53.  }, 
  54.  
  55.  cancel:function(){ 
  56.  wx.redirectTo({ 
  57.  url: '../index/index', 
  58.  }) 
  59.  }, 
  60.  /** 
  61.  * 页面的初始数据 
  62.  */ 
  63.  data: { 
  64.  files: [], 
  65.  options:null, 
  66.  id:null, 
  67.  }, 
  68.  formSubmit:function(e){ 
  69.  upload(this,this.data.id); 
  70.  }, 
  71.  /** 
  72.  * 生命周期函数--监听页面加载 
  73.  */ 
  74.  onLoad: function (options) { 
  75.  console.log(options); 
  76.  this.setData({options:options}) 
  77.  this.setData({ id: options.id }) 
  78.  }, 
  79.  
  80.  /** 
  81.  * 生命周期函数--监听页面初次渲染完成 
  82.  */ 
  83.  onReady: function () { 
  84.  
  85.  }, 
  86.  
  87.  /** 
  88.  * 生命周期函数--监听页面显示 
  89.  */ 
  90.  onShow: function () { 
  91.  
  92.  }, 
  93.  
  94.  /** 
  95.  * 生命周期函数--监听页面隐藏 
  96.  */ 
  97.  onHide: function () { 
  98.  
  99.  }, 
  100.  
  101.  /** 
  102.  * 生命周期函数--监听页面卸载 
  103.  */ 
  104.  onUnload: function () { 
  105.  
  106.  }, 
  107.  
  108.  /** 
  109.  * 页面相关事件处理函数--监听用户下拉动作 
  110.  */ 
  111.  onPullDownRefresh: function () { 
  112.  
  113.  }, 
  114.  
  115.  /** 
  116.  * 页面上拉触底事件的处理函数 
  117.  */ 
  118.  onReachBottom: function () { 
  119.  
  120.  }, 
  121.  
  122.  /** 
  123.  * 用户点击右上角分享 
  124.  */ 
  125.  onShareAppMessage: function () { 
  126.  
  127.  } 
  128. })

 wxml代码如下：

  1. <view class="weui-cells__title text">录入学生信息</view> 
  2. <form bindsubmit="formSubmit"> 
  3.  <view class="weui-cells weui-cells_after-title"> 
  4.  <view class="weui-cell weui-cell_input"> 
  5.  <view class="weui-cell__hd"> 
  6.   <view class="weui-label">学号</view> 
  7.  </view> 
  8.  <view class="weui-cell__bd"> 
  9.   <input class="weui-input" placeholder="请输入学号" value='1635050739' name="no" /> 
  10.  </view> 
  11.  </view> 
  12.  <view class="weui-cell weui-cell_input weui-cell_vcode"> 
  13.  <view class="weui-cell__hd"> 
  14.   <view class="weui-label">姓名</view> 
  15.  </view> 
  16.  <view class="weui-cell__bd"> 
  17.   <input class="weui-input" placeholder="请输入姓名" value='小苏' name="name" /> 
  18.  </view> 
  19.  </view> 
  20.  <view class="weui-cell weui-cell_input"> 
  21.  <view class="weui-label">性别</view> 
  22.  <input class="weui-input" name='sex' value='{{sex}}'/> 
  23.  <view class='weui-cell_ft'> 
  24.   <switch checked bindchange='switch1Change'></switch> 
  25.  </view> 
  26.  </view> 
  27.  <view class="weui-cell weui-cell_input weui-cell_vcode"> 
  28.  <view class="weui-cell__hd"> 
  29.   <view class="weui-label">年龄</view> 
  30.  </view> 
  31.  <view class="weui-cell__bd"> 
  32.   <input class="weui-input" placeholder="请输入年龄" value='20' name="age" /> 
  33.  </view> 
  34.  </view> 
  35.  </view> 
  36.  <view class="weui-btn-area"> 
  37.  <button class="weui-btn" type="primary" bindtap="showTopTips" formType="submit">注册</button> 
  38.  <button class="weui-btn" type="default" bindtap='cancel'>返回上级</button> 
  39.  </view> 
  40. </form>

上传图片wxml代码如下：

  1. <view class="page" xmlns:wx="http://www.w3.org/1999/xhtml"> 
  2. <view class="weui-cells__title text">图像采集</view> 
  3. <view class="weui-cells__title text">{{options.name}} {{options.no}}</view> 
  4. <form bindsubmit="formSubmit"> 
  5. <view class="page__bd"> 
  6.  <view class="weui-cells"> 
  7.   <view class="weui-cell"> 
  8.   <view class="weui-cell__bd"> 
  9.    <view class="weui-uploader"> 
  10.    <view class="weui-uploader__hd"> 
  11.     <view class="weui-uploader__title">图片上传</view> 
  12.     <view class="weui-uploader__info">{{files.length}}/1</view> 
  13.    </view> 
  14.    <view class="weui-uploader__bd"> 
  15.     <view class="weui-uploader__files" id="uploaderFiles"> 
  16.     <block wx:for="{{files}}" wx:key="*this"> 
  17.      <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}"> 
  18.      <image class="weui-uploader__img" src="{{item}}" mode="aspectFill"/> 
  19.      </view> 
  20.     </block> 
  21.     </view> 
  22.     <view class="weui-uploader__input-box"> 
  23.     <view class="weui-uploader__input" bindtap="chooseImage"></view> 
  24.     </view> 
  25.    </view> 
  26.    </view> 
  27.   </view> 
  28.   </view> 
  29.  </view> 
  30.  </view> 
  31.  <view class="weui-btn-area"> 
  32.   <button class="weui-btn" type="primary" form-type="submit">确认</button> 
  33.   <button class="weui-btn" type="default" bindtap='cancel'>取消</button> 
  34.  </view> 
  35.  </form> 
  36. </view>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！