浏览器的图像识别API初探
记得几年前本科的毕业论文写的就是人脸识别，当时用的是matlab。后来研究生时好多大神的实验室用c++写的程序更是牛的一比。 现在，我们竟然可以用js在浏览器上实现人脸识别了，惊不惊喜，意不意外？！ 方法调用十分简单，笔者照葫芦画瓢，写了个demo，简单介绍一下这一功能。
demo截图
能识别人脸的具体坐标（boundingBox中返回），以及双眼和嘴巴的具体坐标（landmarks中返回）
可以看出识别的精确率还是有待提高的，猜测可能与角度和遮挡物（如发型）有关。还有就是，算法貌似对黑人朋友不太友好啊😅。。。
能识别文字所在的轮廓，但是目前还不能识别出具体文字是啥，无论英文还是中文（返回中rawValue为空）。
能识别出二维码的具体坐标，并能给出解析后的链接地址（rawValue中返回）
目前只有chrome浏览器支持，且确保chrome的实验性特性已经激活
注意
地址栏输入：chrome://flags/#enable-experimental-web-platform-features
找到Experimental Web Platform features，选择Enabled
代码片段
//人脸识别部分
let faceDetector = new FaceDetector(
{
fastMode: true,
maxDetectedFaces: 20
}
);
faceDetector.detect(image)
.then(faces => {
console.log(faces);
if(!faces.length) {
alert('No faces detected!');
} else {
alert(faces.length + ' faces detected!');
this.faces = faces;
this.renderBoxes(faces);
}
}).catch((e) => {
console.error('fail:' + e);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//文字识别部分
let textDetector = new TextDetector();
textDetector.detect(image)
.then(texts => {
console.log(texts);
if(!texts.length) {
alert('No texts detected!');
} else {
alert(texts.length + ' texts detected!');
this.texts = texts;
this.renderBoxes(texts);
}
}).catch((e) => {
console.error('fail:' + e);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//二维码识别
let barcodeDetector = new BarcodeDetector();
barcodeDetector.detect(image)
.then(qrs => {
console.log(qrs);
for (let qr of qrs) {
this.renderLinkValue(qr);
}
}).catch((e) => {
console.error('fail:' + e);
});
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11