小程序调用百度云接口实现人脸识别
小程序开发教程栏目介绍不一样的实现人脸识别方法
一 准备好百度云的开发者账号
- 登录
- 进入控制台
- 人工智能------图像识别
- 创建应用
获取接口需要的参数
查看官网API文档
二 页面布局
文件ai.wxml:
<view class="c1">
<view class="c1-1">
</view>
<button type="primary" size="mini" bindtap="chooseImage">选择图片</button>
<view class="c1-2">
<image src="https://www.swvq.com/{{img}}" mode="widthFix"></image>
<text>颜值:{{face.beauty}}</text>
<text>年龄:{{face.age}}</text>
<text>性别:{{face.gender.type}}</text>
<text>情绪:{{face.emotion.type}}</text>
</view>
</view>
编写样式文件ai.wxss
.c1{
padding: 50rpx;
}
.c1-1{
height: 800rpx;
margin-bottom: 20rpx;
display: flex;
justify-content: center;
font-size: 30rpx;
box-shadow: 0px 0px 10px gray;
}
.c1-2{
}
页面布局如下:
ai.js
//获取app.js对象
var app = getApp();
Page({
data: {
face: {},//检测结果
img: '', //选择的图片
showResult: false //检测是由有结果
},
onLoad: function (options) {
//console.log('获取全局变量数据:' app.globalData.access_token);
},
//选择图片事件
chooseImage(){
var that = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
const tempPath = res.tempFilePaths[0];//获取选择的图片的地址
//准备好了access_token和图片后,就可以开始请求百度的人脸检测接口了https://aip.百度bce.com/rest/2.0/face/v3/detect
//该接口需要的参数是access_token,图片的base64值
//图片的base64值的处理
var base64 = wx.getFileSystemManager().readFileSync(tempPath,'base64');
//提示
wx.showLoading({
title: '人脸检测中...',
mask: true
});
//开始请求百度的人脸检测接口
wx.request({
url: 'https://aip.百度bce.com/rest/2.0/face/v3/detect?access_token=' app.globalData.access_token,
data: {
image: base64,
image_type: 'BASE64',
face_field: 'age,beauty,expression,face_shape,gender,glasses,race,emotion'
face_field: 'name, kind'
},
method: 'POST',
header: {'content-type': 'application/json'},
//header: {'content-type': 'application/x-www-form-urlencoded'},
success (res) {
console.log(res);
if(res.statusCode == 200 && res.data.error_code == 0){ //检测结果正确
//将选择的图片回显到页面
//that.setData({img: tempPath});
that.setData();
//植物识别要传入键值对
//取出检测的结果进行页面显示
var face = res.data.result.face_list[0];
console.log(face);
that.setData({face: face,showResult: true});
//隐藏加载窗口
wx.hideLoading();
}else{
wx.showToast({
title: '检测失败' res.data.error_msg,
duration: 5000
});
}
}
})
}
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
app.js
//app.js
App({
onLaunch: function () {
var access_token = wx.getStorageSync('access_token');
var expire_in = wx.getStorageSync('expire_in');
// var access_token = parse;
var access_token_date = parseInt(wx.getStorageSync('access_token_date'));
var now = new Date().getTime();
if(!access_token){
this.requestToken();
} else if(now > access_token_date expire_in){
this.requestToken();
}else{
}
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
},
requestToken() {
var that = this;
wx.request({
url: 'https://aip.百度bce.com/oauth/2.0/token',
data: {
grant_type: 'client_credentials',
// aaa那里填写自己的百度key值
client_id: 'aaa',
client_secret: 'aaa'
},
//header: {'content-type': 'application/json'},
header: {'content-type': 'application/x-www-form-urlencoded'},
success (res) {
if(res.statusCode == 200){
wx.setStorageSync("access_token", res.data.access_token);
wx.setStorageSync("expires_in", res.data.expires_in);
//wx.setStorageSync("access_token_date", res.data.access_token_date);
wx.setStorageSync("access_token_date", new Date().getTime());
that.globalData.access_token = res.data.access_token;
}
}
})
}
})
识别结果如下:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbgbej
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24