记录生活中的点点滴滴

0%

人脸检测微信小程序

前两天开发了一款人脸检测小程序,我们可以在上面上传图片,它会给我们返回这张人脸的gender,age,beauty,expression,glasses,emotion。后端是用node写的,挂在我的阿里云服务器上。

这是进入的主页面,因为我的CSS水平还不咋地,所以就先设置成这样吧。

我们选择一张人脸图片,下面表格的值就会发生对应变化。

当我们选择的是非人脸的图片的话,它会弹出提示,提示我们出现了一些错误。

其实这款小程序最核心的就是处理上传图片和接受其返回值的那块代码。我设定了选择图片这个按钮的点击函数为choosePic,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
choosePic: function() {
//点击后调用微信的选择图片wx.chooseImage这个API
wx.chooseImage({
count: 1, //数量为1,即一次只能选择一张图片
sizeType: ['original', 'compressed'], //所选的图片的尺寸:original(原图)、compressed(压缩图)
sourceType: ['album', 'camera'], //选择图片的来源:album(从相册选图)、camera(使用相机)
//这是选择图片完成后的success函数
success: (res) => {
wx.showLoading({
title: '加载中', //因为上传图片,处理服务器的返回信息需要一段时间,所以调用微信的wx.showLoading()这个显示 loading 提示框的API
})

//res.tempFilePaths为图片的本地临时文件路径列表 (本地路径),是一个数组
var tempFilePaths = res.tempFilePaths

//这一步是设置页面上面图片那部分的imagePath,这样就可以在上面显示选择的图片
this.setData({
imagePath: tempFilePaths
})

//调用微信wx.uploadFile()上传图片的API
wx.uploadFile({
url: 'https://gaosong.site:3000/adddata',
filePath: tempFilePaths[0], //上传的文件本地路径,即tempFilePaths
name: 'file',
success: (res) => {
//从后台传入的res.data如果是'err',说明出现了错误,这样我们把那些表格的值全部赋值为空,并弹出提示框,报告用户出现了:Something went wrong
if (res.data === 'err') {
this.setData({
gender: '',
age: '',
beauty: '',
expression: '',
glasses: '',
emotion: ''
})
wx.showModal({
title: 'prompt',
content: 'Something went wrong',
showCancel: false,
confirmText: 'OK',
success(res) {}
})
} else {
//如果res.data不是'err',说明成功,这样我们JSON解析res.data令他变为对象,并将那些表格对应的值赋值
var faces = JSON.parse(res.data);
this.setData({
gender: faces.gender.type,
age: faces.age,
beauty: faces.beauty,
expression: faces.expression.type,
glasses: faces.glasses.type,
emotion: faces.emotion.type
})
}
//无论成功还是失败,都取消那个loading 提示框
wx.hideLoading()
}
})
}
})
}

这个小项目已经上传到了github上面:人脸识别小程序源码。有需要的朋友可以看看。