因为 tensorflow.js 的实时并不是很精确，所以，有的时候，追求精确的对比，我们需要上传静态图片，做更大数据规模的比对。
在静态图片的对比上，我们选择调用百度的 AI 接口。
你可以参考我下面的资料。「获得 access token」
先说一下，百度调用人体关键点的几个要求：
- 图像数据，
base64编码后进行urlencode，要求base64编码和urlencode后大小不超过4M
- 图片的
base64编码是不包含图片头的，如(data:image/jpg;base64,)，支持图片格式：jpg、bmp、png
情景
传递一个静态图片
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
| import img_pose from "../../images/3.jpg"
function image2Base64(img) {
let canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
return canvas.toDataURL();
}
$("#button").click(function () {
let base64 = "";
let img = new Image();
img.src = img_pose;
img.onload = function () {
base64 = image2Base64(img).substring(22,);
$.ajax({
url: api.baidu_body_point,
type: "POST",
contentType: "application/x-www-form-urlencoded",
data: {
image: base64,
},
success: function (res, status, xhr) {
if (res["person_num"] === 0) {
...
} else {
...
}
},
error: function (xhr, status, error) {
console.log(error);
}
});
}
});
|
很有意思的一点是，无论是什么格式的图片，上面都会解析成 data:image/png;base64。
传递摄像头的一帧
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
| const aCanvas = document.getElementById('canvas');
const ctx = aCanvas.getContext('2d');
const video = document.getElementById('video');
$("#button").click(function () {
let base64 = "";
let img = new Image();
let newCanvas = document.createElement('canvas');
let newCtx = newCanvas.getContext('2d');
newCanvas.setAttribute("width", video.videoWidth + "px");
newCanvas.setAttribute("height", video.videoHeight + "px");
newCtx.drawImage(video, 0, 0);
img.src = newCanvas.toDataURL("image/png");
img.onload = function () {
...
base64 = newCanvas.toDataURL().substring(22,);
$.ajax({
url: api.baidu_body_point,
type: "POST",
contentType: "application/x-www-form-urlencoded",
data: {
image: base64,
},
success: function (res, status, xhr) {
if (res["person_num"] === 0) {
...
} else {
...
}
},
error: function (xhr, status, error) {
console.log(error);
}
});
}
});
|
跨域问题
因为，我想让我的项目尽可能的轻量，所以，不想要后端，但是，在调用百度 ai 的时候，如果没有后端，直接浏览器请求会遇到跨域问题，所以，想的是使用 nginx 来解决这个问题。
并且，我想走的是 https 链接。所以，最终你可以参考我下面的文章。
这里我贴一下最后的 nginx 配置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| server {
listen 8444 ssl;
server_name shicuijidata.com; #需要将yourdomain.com替换成证书绑定的域名。
root html;
index index.html index.htm;
ssl_certificate conf.d/cert/5057263_shicuijidata.com.pem; #需要将cert-file-name.pem替换成已上传的证书文件的名称。
ssl_certificate_key conf.d/cert/5057263_shicuijidata.com.key; #需要将cert-file-name.key替换成已上传的证书密钥文件的名称。
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
#表示使用的加密套件的类型。
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #表示使用的TLS协议的类型。
ssl_prefer_server_ciphers on;
location / {
root /var/www/html8444; #站点目录。
index index.html index.htm;
}
location /rest {
proxy_pass https://aip.baidubce.com;
}
}
|
至此，仅用前端代码就能实现一个完整的项目了。
