282 lines
7.3 KiB
Plaintext
282 lines
7.3 KiB
Plaintext
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<div class="custom" :style="{height: CustomBar+'px'}">
|
|||
|
|
<view class="navcontent" :style="[{top:statusBar + 'px'}]">
|
|||
|
|
<uni-icons2 @click="BackPage" class="backImg" type="arrowleft" size="28" color="white"
|
|||
|
|
style="line-height: 90rpx;padding-left: 30rpx;"></uni-icons2>
|
|||
|
|
<text style="color: #FFFFFF;font-size: 30rpx;line-height: 90rpx;">人脸识别</text>
|
|||
|
|
<text style="opacity: 0;">返回</text>
|
|||
|
|
</view>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="livefater">
|
|||
|
|
<div style="width: 375px;height: 375px;border-radius: 350px;overflow: hidden;">
|
|||
|
|
<live-pusher id='livePusher' ref="livePusher" class="livePusher" url="" mode="SD" :muted="true"
|
|||
|
|
:enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2" aspect="1:1"
|
|||
|
|
@statechange="statechange" @netstatus="netstatus" @error="error"></live-pusher>
|
|||
|
|
</div>
|
|||
|
|
<cover-image src="/static/circleBox.png" class="gaiimg"></cover-image>
|
|||
|
|
</div>
|
|||
|
|
<!-- <button class="btn" @click="startPreview">打开摄像头进行人脸识别</button> -->
|
|||
|
|
<div class="tips">{{tips}}</div>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import uniIcons from "@/components/uni-icons/uni-icons.vue"
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
fil: true,
|
|||
|
|
imgList: [""],
|
|||
|
|
statusBar: '',
|
|||
|
|
CustomBar: 0,
|
|||
|
|
tips: '请将人脸放置在正中间',
|
|||
|
|
faceScore: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.faceScore = options.faceScore
|
|||
|
|
},
|
|||
|
|
onReady() {
|
|||
|
|
// 注意：需要在onReady中 或 onLoad 延时
|
|||
|
|
this.context = uni.createLivePusherContext("livePusher", this);
|
|||
|
|
var that = this
|
|||
|
|
uni.getSystemInfo({
|
|||
|
|
success: function(e) {
|
|||
|
|
// 计算导航栏高度
|
|||
|
|
that.statusBar = e.statusBarHeight
|
|||
|
|
// #ifndef MP
|
|||
|
|
if (e.platform == 'android') {
|
|||
|
|
that.CustomBar = e.statusBarHeight + 50
|
|||
|
|
} else {
|
|||
|
|
that.CustomBar = e.statusBarHeight + 45
|
|||
|
|
}
|
|||
|
|
console.log(that.statusBar)
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
let custom = wx.getMenuButtonBoundingClientRect()
|
|||
|
|
that.CustomBar = custom.bottom + custom.top - e.statusBarHeight
|
|||
|
|
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifdef MP-ALIPAY
|
|||
|
|
that.CustomBar = e.statusBarHeight + e.titleBarHeight
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.startPreview()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
Timer() {},
|
|||
|
|
statechange(e) {
|
|||
|
|
console.log("statechange:" + JSON.stringify(e));
|
|||
|
|
},
|
|||
|
|
netstatus(e) {
|
|||
|
|
console.log("netstatus:" + JSON.stringify(e));
|
|||
|
|
},
|
|||
|
|
error(e) {
|
|||
|
|
console.log("error:" + JSON.stringify(e));
|
|||
|
|
},
|
|||
|
|
start: function() {
|
|||
|
|
this.context.start({
|
|||
|
|
success: (a) => {
|
|||
|
|
console.log("livePusher.start:" + JSON.stringify(a));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
close: function() {
|
|||
|
|
this.context.close({
|
|||
|
|
success: (a) => {
|
|||
|
|
console.log("livePusher.close:" + JSON.stringify(a));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 拍照事件
|
|||
|
|
snapshot: function() {
|
|||
|
|
var that = this
|
|||
|
|
this.context.snapshot({
|
|||
|
|
success: (e) => {
|
|||
|
|
console.log(JSON.stringify(e));
|
|||
|
|
that.getMinImage(e.message.tempImagePath)
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 开启摄像头
|
|||
|
|
startPreview() {
|
|||
|
|
console.log("1")
|
|||
|
|
var that = this
|
|||
|
|
this.context.startPreview({
|
|||
|
|
success: (a) => {
|
|||
|
|
console.log("livePusher.startPreview:" + JSON.stringify(a));
|
|||
|
|
setTimeout(() => {
|
|||
|
|
that.snapshot()
|
|||
|
|
}, 2000)
|
|||
|
|
// that.Timer = setInterval(function(){
|
|||
|
|
// that.snapshot()
|
|||
|
|
// if(that.imgList.length>3){
|
|||
|
|
// console.log("3")
|
|||
|
|
// clearInterval(that.Timer)
|
|||
|
|
// }
|
|||
|
|
// },2000)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 人脸比对
|
|||
|
|
faceComparison(fileUrl) {
|
|||
|
|
var that = this
|
|||
|
|
var workerId = JSON.parse(uni.getStorageSync('userInfo')).workerId
|
|||
|
|
|
|||
|
|
uni.request({
|
|||
|
|
// url: getApp().globalData.siteUrl + 'xmgl/recognition/faceComparison' + '?lang=' + uni.getStorageSync('language'),
|
|||
|
|
url: this.url_config + 'xmgl/recognition/faceComparison' + '?lang=' + uni.getStorageSync(
|
|||
|
|
'language'),
|
|||
|
|
data: {
|
|||
|
|
faceScore: this.faceScore,
|
|||
|
|
fileUrl: fileUrl,
|
|||
|
|
workerId: workerId
|
|||
|
|
},
|
|||
|
|
method: 'POST',
|
|||
|
|
// header: {
|
|||
|
|
// 'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
|
|||
|
|
// },
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log('比对结果', res)
|
|||
|
|
if (res.data.code == 500) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
that.snapshot()
|
|||
|
|
}, 2000)
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '识别成功！'
|
|||
|
|
})
|
|||
|
|
var pages = getCurrentPages();
|
|||
|
|
var prevPage = pages[pages.length - 2]; //上一个页面
|
|||
|
|
//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
|
|||
|
|
// 上一个页面最后设置userdata
|
|||
|
|
//小程序用setData带参
|
|||
|
|
// prevPage.setData({
|
|||
|
|
// photoUrl: photoUrl
|
|||
|
|
// })
|
|||
|
|
//uni或者vue用$vm
|
|||
|
|
prevPage.$vm.photoUrl = fileUrl;
|
|||
|
|
uni.navigateBack({ //返回
|
|||
|
|
delta: 1
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
that.tips = res.data.message
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
fail(res) {
|
|||
|
|
console.log('fail', res)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 使用plus.zip.compressImage压缩图片并转换成base64
|
|||
|
|
getMinImage(imgPath) {
|
|||
|
|
var that = this
|
|||
|
|
plus.zip.compressImage({
|
|||
|
|
src: imgPath,
|
|||
|
|
dst: imgPath,
|
|||
|
|
overwrite: true,
|
|||
|
|
quality: 40
|
|||
|
|
},
|
|||
|
|
zipRes => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
var reader = new plus.io.FileReader();
|
|||
|
|
reader.onloadend = res => {
|
|||
|
|
var speech = res.target.result; //base64图片
|
|||
|
|
// console.log(speech);
|
|||
|
|
// this.imgList.push(speech);
|
|||
|
|
// console.log(getApp().globalData.siteUrl + 'upload/uploadBase64')
|
|||
|
|
console.log(this.url_config + 'upload/uploadBase64')
|
|||
|
|
uni.request({
|
|||
|
|
url: this.url_config + 'upload/uploadBase64', //仅为示例，并非真实接口地址。
|
|||
|
|
data: {
|
|||
|
|
base64Image: speech
|
|||
|
|
},
|
|||
|
|
method: 'POST',
|
|||
|
|
header: {
|
|||
|
|
'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
|
|||
|
|
},
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log('obj', res)
|
|||
|
|
that.faceComparison(res.data.data.imageUrl)
|
|||
|
|
// this.text = 'request success';
|
|||
|
|
},
|
|||
|
|
fail(res) {
|
|||
|
|
console.log('fail', res)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
// console.log('6666',plus.io.convertLocalFileSystemURL(zipRes.target))
|
|||
|
|
// console.log('76777',reader.readAsDataURL(plus.io.convertLocalFileSystemURL(zipRes.target)))
|
|||
|
|
// //一定要使用plus.io.convertLocalFileSystemURL将target地址转换为本地文件地址，否则readAsDataURL会找不到文件
|
|||
|
|
reader.readAsDataURL(plus.io.convertLocalFileSystemURL(zipRes.target));
|
|||
|
|
|
|||
|
|
}, 1000);
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
function(error) {
|
|||
|
|
console.log('Compress error!', error);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
BackPage() {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.custom {
|
|||
|
|
background-color: #5181F6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.navcontent {
|
|||
|
|
height: 90rpx;
|
|||
|
|
/* display: -ms-flex;
|
|||
|
|
display: -webkit-flex; */
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
flex-direction: row;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.livePusher {
|
|||
|
|
width: 375px;
|
|||
|
|
height: 375px;
|
|||
|
|
background-color: rgb(204, 204, 204);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.livefater {
|
|||
|
|
display: -ms-flex;
|
|||
|
|
display: -webkit-flex;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 50rpx;
|
|||
|
|
margin-bottom: 50rpx;
|
|||
|
|
height: 350px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gaiimg {
|
|||
|
|
width: 375px;
|
|||
|
|
height: 375px;
|
|||
|
|
margin-top: -375px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tips {
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-direction: row;
|
|||
|
|
}
|
|||
|
|
</style>
|