微信小程式之人臉識別(新增資訊和上傳照片)
阿新 • • 發佈:2019-01-10
首先,我們要有開發者工具,今天所說的是後端和前端聯合起來實現的。
在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>