微信小程序：颜值测试

颜值测试

---

前言

选择照片，进行鉴定

代码

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:''
             })
           }
         })


      }


    }

  })


},
 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getAccessToken();
  },

效果

图一

图二

图二

---

小白入门，欢迎指教

---