微信小程序实现人脸识别


Posted in Javascript onMay 25, 2018

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

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

在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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
微信小程序实现刷脸登录
May 25 #Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 #Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 #Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 #Javascript
Webpack中雪碧图插件使用详解
May 25 #Javascript
使用javascript做在线算法编程
May 25 #Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 #Javascript
You might like
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
星球大战与Python之间的那些事
2016/01/07 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
Python数组并集交集补集代码实例
2020/02/18 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
电大自我鉴定范文
2013/10/01 职场文书
高一地理教学反思
2014/01/18 职场文书
2014新年寄语
2014/01/20 职场文书
关于环保的演讲稿
2014/05/10 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
记者节感言
2015/08/03 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
护士心得体会范文
2016/01/25 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS