# 浏览器的图像识别API初探

原文链接

记得几年前本科的毕业论文写的就是人脸识别，当时用的是matlab。后来研究生时好多大神的实验室用c++写的程序更是牛的一逼。 现在，我们竟然可以用js在浏览器上实现人脸识别了，惊不惊喜，意不意外？！ 方法调用十分简单，笔者照葫芦画瓢，写了个demo，简单介绍一下这一功能。

github地址

demo地址

# demo截图

可以看出识别的精确率还是有待提高的，猜测可能与角度和遮挡物（如发型）有关。还有就是，算法貌似对黑人朋友不太友好啊😅。。。

目前只有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);
	});

//文字识别部分
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);
	});

//二维码识别
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);
	});

# 亲自试一下吧