微信小程序人脸识别之人脸属性检测

先看下效果

不多说废话，直接上代码

<view>
<button type="primary" bindtap="chooseImage">选择图片</button>
</view>


chooseImage(){
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success :(res) => {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
    this.setData({
      imageUrl:tempFilePaths[0]
    })
    //向后台发送
    wx.uploadFile({
      url: 'http://www.thexxdd.cn/baidu/', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      success : (res)=>{
        // const data = res.data
        console.log(res)
        //do something
      }
    })
  }
})

},

一般接口都是后台通过AI直接给你配置好，然后你调用即可

紫色的动画是为了有那么一个正在扫描的状态，避免比如用户太多，然后扫描很慢，加一个状态，提高用户体验

<!-- 动画 -->
<view class="animation">
<view class="animation-list">

</view>
</view>

.animation{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 500rpx;

}
.animation-list{
  width: 100%;
  height: 450rpx;
  background: linear-gradient(to bottom,rgba(216,179,255,0),rgba(216,179,255,1));
  position: relative;
  top: -600rpx;
  animation: myfist 2s linear 1s infinite alternate;
}

/* 开始执行动画 */
@keyframes myfist{
  0%{
    background: linear-gradient(to bottom,rgba(216,179,255,0),rgba(216,179,255,1));
    left: 0;
    top: -600rpx;
  }
  25%{
    left: 0;
    top: 50rpx;
  }
  50%{
    left: 0;
    top: 50rpx;
  }
  75%{
    left: 0;
    top: 50rpx;
  }
  100%{
    left: 0;
    top: -600rpx;
  }
}

给它一个判断，当扫描完成就隐藏即可