Chrome Shape Detection API 简介

照片和图像是网络中最大的组成部分,其中许多包括可识别的特征,例如人脸或二维码。检测这些图片功能的计算成本很高,但是在一些移动设备上,硬件制造商一直都支持这些功能。

本篇文章介绍的是 Chrome 的 Shape Detection API,这个 API 允许在功能可用的情况下(需要在浏览器中启用相关功能)访问硬件加速检测器,从而实现通过使用操作系统资源在 Web 上实时或静止图像中检测形状(人脸,条码,文本)。Chrome 团队在 2016 年 8 月就尝试在浏览器中集成了直接提供给 Web 开发调用的 Shape Detection API,参考现有的一些文章都说目前仅在 Canary 版本才能实现,但是通过测试,实际在 Chrome 57 之后就支持了,我这里是在 Google Chrome 70.0.3538.77(Stable 稳定版)进行下面的操作。

图像识别

图形识别这种对系统资源和设备计算能力要求颇高的功能,通常只有底层的原生 API 能驾驭,而 Shape Detection API 旨在改变这一点。下面介绍一下 Shape Detection API 提供的三个接口以及实际用例:

人脸识别(FaceDetector):可以给编码器或自动对焦放放提供提示,也可以给识别的用户做标记等。

文本识别(TextDetector):OCR 配合语音接口(语音能力下文也有提及),朗读图片中的文字等。

条码识别(BarcodeDetector):识别网页中的条形码/二维码,并作相应的动作,比如链接跳转等。

功能演示

在实际操作之前,我们需要先在 Chrome 浏览器中打开实验性功能chrome://flags)页面,然后搜索 Experimental Web Platform features 功能并启用(Enabled)即可。注意这里启用功能之后需要重新启动 Google Chrome 之后才能生效。然后我们可以用下面命令在 Console 中检测功能是否正常:

window.FaceDetector
window.BarcodeDetector
window.TextDetector

如果回显 undefined 则说明不支持或者是没有重启浏览器导致的,下面是正常的回显内容:

人脸识别(FaceDetector)

人脸识别需要用到 FaceDetector 接口,调用这个接口只需要在 Javascript 代码中创建一个 FaceDetector 实例,如下所示:

const faceDetector = new FaceDetector();

FaceDetector 构造函数有以下参数:

  • maxDetectedFaces :在图像源中可识别人脸数的最大值;

  • fastMode :告诉浏览器尝试优先考虑速度而不是准确性;

FaceDetector 接口有一个 detect() 方法,用来接收一个图片并检测图片中的人脸,方法原型如下

const imageSource = document.querySelector('img');
 
faceDetector.detect(imageSource)
    .then(handleDetectedFaces)
    .catch(console.error);

faceDetector.detect() 会返回一个 Javascript Promise,它解析 DetectedFace 从图像源检测到的每个人脸的对象数组,每个 DetectedFace 对象都有以下属性:

  • boundingBox :描述图像中检测到人脸的位置和边界;

  • landmarks :描述检测人脸的器官的坐标和性状,比如眼睛、鼻子、嘴巴以及他们的坐标;

注意:这里 landmarks 理论上应该还得返回一个 nose 的值,也就是鼻子的位置,但是三哥这里测试了多个图片均无法正确识别,点击获取该示例代码

文本识别(TextDetector)

文本需要用到 TextDetector 接口,调用这个接口只需要在 Javascript 代码中创建一个 TextDetector 实例,如下所示:

const textDetector = new TextDetector();

与 FaceDetector 不同的是 TextDetector 构造函数没有任何参数,并且这个接口也有一个 detect()方法,可用于从给定图像源中检测文本,方法原型如下

const imageSource = document.querySelector('img');
 
textDetector.detect(imageSource)
    .then(handleDetectedTexts)
    .catch(console.error);

textDetector.detect() 会返回一个 Javascript Promise,它解析 DetectedText 从图像源检测到的每个文本的对象数组,每个 DetectedText 对象都有以下属性:

  • boundingBox :描述图像中检测到文字的位置和边界;

  • rawValue :检测到文字的字符串;

  • cornerPoints :文字各顶点序列值;

注意:这里 rawValue 理论上应该返回 Vtrois 但是这里为空了,点击获取该示例代码

条码识别(BarcodeDetector)

条码需要用到 BarcodeDetector 接口,调用这个接口只需要在 Javascript 代码中创建一个 BarcodeDetector 实例,如下所示:

const barcodeDetector = new BarcodeDetector();

barcodeDetector 构造函数同样也没有任何参数,并且这个接口也有一个 detect() 方法,可用于从给定图像源中检测条码,方法原型如下

const imageSource = document.querySelector('img');
 
barcodeDetector.detect(imageSource)
    .then(handleDetectedBarcodes)
    .catch(console.error);

barcodeDetector.detect() 会返回一个 Javascript Promise,它解析 DetectedText 从图像源检测到的每个条码的对象数组,每个 DetectedText 对象都有以下属性:

  • boundingBox :描述图像中检测到条码的位置和边界;

  • rawValue :检测到条码并解析的字符串;

  • cornerPoints :条码各顶点序列值;

注意:这里 rawValue 的返回值是正确的,也就是二维码的内容,点击获取示例代码

在线工具

在线工具中有一个基于 Shape Detection API 的演示工具,叫作视频流图像识别,它的功能是从您的电脑摄像头获取视频流,并尝试从视频流中检测图形,并且这是一个可以脱机工作的工具。需要使用 Chrome 57 或更高版本,并在 Chrome 浏览器中的实验性功能中启用 Experimental Web Platform features 功能。

参考资料

Accelerated Shape Detection in Images

发表在 Uncategorized | 留下评论