微信小程序之人脸识别(添加信息和上传照片)

原文：https://blog.csdn.net/SPP_TY/article/details/80432270

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

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

60. })

上传图片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>