颜值测试
文章目录
前言
选择照片，进行鉴定
代码
1.wxml代码
布局
代码如下：
<!-- 图片容器 -->
<view class="img_wrap">
<!-- 初始图片 -->
<image mode="aspectFit" src="{{beginImg}}"></image>
<image class="loadingImg" src="/assets/imgs/face.gif" wx:if="{{loadingStatus}}"></image>
</view>
<!-- 按钮区域 -->
<view class="button_wrap">
<button type="primary" bindtap="selectImg">选择照片</button>
<button type="primary" bindtap="testBeauty">测试颜值</button>
</view>
<!-- 测试结果区域 -->
<view class="result_wrap">
<view style="text-align: center;">性别、年龄、颜值...</view>
</view>
2.wxss代码
样式
代码如下：
.img_wrap{
width: 100%;
height: auto;
text-align: center;
padding: 20rpx;
position: relative;
}
.button_wrap{
margin-bottom: 30rpx;
text-align: center;
}
.button_wrap button{
width: 35vw !important;
display: inline-block;
margin: 0 3vw !important;
}
.loadingImg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100% !important;
height: 100% !important;
}
.result_wrap{
height: 80rpx;
text-align: center;
font-weight: bold;
margin: 20px;
}
3.js
代码如下：
Page({
/**
* 页面的初始数据
*/
data: {
loadingStatus:false,
beginImg:'/assets/imgs/yz.gif',
data_access_token:'',
imgBase64:""
},
getAccessToken(){
wx.request({
url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id= &client_secret= ',
success:res=>{
console.log(res);
if (res.statusCode !== 200) {
wx.showToast({
title: '鉴权失败',
icon:'none'
})
return;
}else{
wx.showToast({
title: '鉴权成功',
})
//重置acess_token
this.setData({
data_access_token:res.data.access_token
})
}
}
})
},
//选择图片
selectImg(){
wx.chooseImage({
count: 0,
sizeType:['original'],
sourceType:['album','camera'],
success:res=>{
console.log(res.tempFilePaths[0]);
//缓存区的连接传过去
this.transformBase64(res.tempFilePaths[0]);
}
})
},
//图片转化为base64编码并展示
transformBase64(imgSrc){
var FileSystemManager = wx.getFileSystemManager();
// 创建文件管理器
FileSystemManager.readFile({
filePath:imgSrc,
encoding:'base64',
success:res=>{
console.log(res.data);
this.setData({
beginImg:'data:image/png;base64,'+res.data,
imgBase64:res.data
})
}
})
},
testBeauty(){
this.setData({loadingStatus:true})
console.log(this.data.data_access_token);
wx.request({
method:"POST",
url: "https://aip.baidubce.com/rest/2.0/face/v3/detect",
data:{
access_token:this.data.data_access_token,
face_field:'age,beauty,gender',
image_type:'BASE64',
image: this.data.imgBase64,
max_face_num:1
},
header:{'Content-Type':'application/x-www-form-urlencoded'},
success:res=>{
console.log(res)
if(res.data.error_code == 222202 ) {
return wx.showToast({
title: '检测失败，没有人脸',
icon:'none'
})
}else if(res.data.error_code!==0){
return wx.showToast({
title:'检测失败，请检测图片',
icon:'none'
})
}else if(res.data.error_code==0)
{
this.setData({loadingStatus:false})
var genderValue=res.data.result.face_list[0].gender.type;
var gender=(genderValue=="male")?'小哥哥':'小姐姐';
var age=res.data.result.face_list[0].age;
var beauty= res.data.result.face_list[0].beauty;
console.log(gender,age,beauty);
var that=this;
wx.showModal({
title: '检测结果',
content:'您好'+gender+','+age+'岁的颜值为'+beauty,
showCancel:false,
confirmText:'已经知晓',
confirmColor:'#7c160',
success(){
//将图片还原
that.setData({
beginImg:'/assets/imgs/yz.gif',
imgBase64:''
})
}
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
this.getAccessToken();
},
效果
图一
图二
图二
小白入门，欢迎指教