This article mainly introduces in detail the WeChat applet to implement face recognition, add information and upload photos. It has certain reference value. Interested friends can refer to this article.

I have shared with you the specific code for face recognition in the WeChat applet for your reference. The specific content is as follows

First of all, we need developer tools. What we are talking about today is achieved by combining the backend and frontend.

Write an upload method in the PHP controller, the code is as follows:

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 ;// 設(shè)置附件上傳大小 
 $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 設(shè)置附件上傳類型 
 $upload->rootPath = $dir; // 設(shè)置附件上傳根目錄 
 $upload->savePath = ''; // 設(shè)置附件上傳（子）目錄 
 $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){ 
  //有數(shù)據(jù)，則更新 
  $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"; 
  
 // 帶參數(shù)調(diào)用人臉檢測 
 $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){//人臉數(shù)量為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('圖片質(zhì)量'); 
   // die('圖片質(zhì)量僅為:'.$face_probability.',上傳失敗'); 
  } 
  }else{ 
  die('人臉數(shù)量大于1'); 
  // die('人臉數(shù)量大于1，失敗'); 
  } 
 }else{ 
  die('沒有人臉'); 
  // die('沒有人臉，失敗'); 
 } 
 }

In the front end we need to write js and wxml in the developer tools.

The js code is as follows:

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) 
  
 } 
  
 } 
 
 }) 
 
 } 
  
})

The js code for uploading images is as follows ：

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'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有 
 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認(rèn)二者都有 
 success: function (res) { 
 console.log(res) 
 // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 
 that.setData({ 
  files: res.tempFilePaths, 
 }); 
 } 
 }) 
 }, 
 //預(yù)覽照片 
 previewImage: function () { 
 var current = e.target.dataset.src 
 wx.previewImage({ 
 current: current, 
 urls: this.data.imageList 
 }) 
 }, 
 
 cancel:function(){ 
 wx.redirectTo({ 
 url: '../index/index', 
 }) 
 }, 
 /** 
 * 頁面的初始數(shù)據(jù) 
 */ 
 data: { 
 files: [], 
 options:null, 
 id:null, 
 }, 
 formSubmit:function(e){ 
 upload(this,this.data.id); 
 }, 
 /** 
 * 生命周期函數(shù)--監(jiān)聽頁面加載 
 */ 
 onLoad: function (options) { 
 console.log(options); 
 this.setData({options:options}) 
 this.setData({ id: options.id }) 
 }, 
 
 /** 
 * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 
 */ 
 onReady: function () { 
 
 }, 
 
 /** 
 * 生命周期函數(shù)--監(jiān)聽頁面顯示 
 */ 
 onShow: function () { 
 
 }, 
 
 /** 
 * 生命周期函數(shù)--監(jiān)聽頁面隱藏 
 */ 
 onHide: function () { 
 
 }, 
 
 /** 
 * 生命周期函數(shù)--監(jiān)聽頁面卸載 
 */ 
 onUnload: function () { 
 
 }, 
 
 /** 
 * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 
 */ 
 onPullDownRefresh: function () { 
 
 }, 
 
 /** 
 * 頁面上拉觸底事件的處理函數(shù) 
 */ 
 onReachBottom: function () { 
 
 }, 
 
 /** 
 * 用戶點擊右上角分享 
 */ 
 onShareAppMessage: function () { 
 
 } 
})

The wxml code is as follows:

<view class="weui-cells__title text">錄入學(xué)生信息</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">學(xué)號</view> 
 </view> 
 <view class="weui-cell__bd"> 
  <input class="weui-input" placeholder="請輸入學(xué)號" value=&#39;1635050739&#39; 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=&#39;小蘇&#39; name="name" /> 
 </view> 
 </view> 
 <view class="weui-cell weui-cell_input"> 
 <view class="weui-label">性別</view> 
 <input class="weui-input" name=&#39;sex&#39; value=&#39;{{sex}}&#39;/> 
 <view class=&#39;weui-cell_ft&#39;> 
  <switch checked bindchange=&#39;switch1Change&#39;></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=&#39;20&#39; 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=&#39;cancel&#39;>返回上級</button> 
 </view> 
</form>

The wxml code for uploading pictures is as follows:

<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">確認(rèn)</button> 
  <button class="weui-btn" type="default" bindtap=&#39;cancel&#39;>取消</button> 
 </view> 
 </form> 
</view>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Two methods to jump to the page in the WeChat mini program

WeChat mini program implements the login page Animation effect of floating clouds

The above is the detailed content of How to implement face recognition in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!