标签：console 微信 颜值 token 测试 res data wx
颜值测试
文章目录
前言
选择照片，进行鉴定
代码
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();
},
效果
图一
图二
图二
小白入门，欢迎指教
标签：console,微信,颜值,token,测试,res,data,wx 来源： https://blog.csdn.net/qq_45126531/article/details/122618956
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。