【译】让图片更有意义——图形检测API

原文地址：A Picture is Worth a Thousand Words, Faces, and Barcodes—The Shape Detection APIundefined作者： Thomas Steiner 日期： 2019-02-22

什么是图形检测API

有了如navigator.mediaDevices.getUserMedia这样的api结合新版Chrome为Android提供的照片选择器，无论是捕获图像、获取实时视频数据还是上传本地图片都变得非常容易。不过目前这些动态或静态图像数据处理都是不透明的，尽管图片实际上包含了许多有趣的特征，如人脸、条形码和文本。

在以前, 如果开发人员想要在客户端提取这些特征，比如开发一个二维码识别器，需要依赖第三方 JavaScript库。这会造成不小的性能开销并且会增加项目的复杂度。然而包括 Android、iOS和 macOS在内的操作系统，以及设备相机模块中的硬件芯片，都已经有表现不俗的特征探测器，如 Android上的人脸探测器或iOS通用功能检测器。

图形检测API是一组JavaScript接口，通过调用这些接口来调用原生设备的探测功能。目前, 已经有包括通过FaceDetector借口实现的人脸检测、BarcodeDetector接口实现的条形码检测, 以及通过TextDetector接口实现的文本检测可以使用。

图形检测API的使用场景

图形检测API目前支持人脸，条形码和文本的检测。以下列出了这三个功能的使用场景：

• 人脸检测
  • 社交网络或是图片社交网站通常给用户提供图片中对人物进行编辑标记的功能。使用人脸检测来高亮人脸边缘, 就可以完成这个任务。
  • 内容网站可以根据检测到的人脸进行自动裁剪, 而不是依赖用户操作, 通过对识别检测出的人脸添加平移、缩放接可以实现这个效果。
  • 多媒体信息网站喜欢给用户提供在人脸上增加有趣东西的功能，如太阳镜或胡子。
• 条形码检测
  • 通过读取二维码，web应用可以解锁许多有趣的功能，如在线支付、 web导航, 或利用条形码建立社交关系。
  • 购物app可以允许用户自行扫描商店中货品的EAN或UPC条形码，用于在线对比商品价格。
  • 机场可以推出在线信息服务，乘客通过扫描登机牌上的条形码，来获取与他们乘坐的航班相关的信息。
• 文本检测
  • 社交网站可以在没有更多图像描述的情况下将图像中检测到的文本设置为图片的 img alt 属性, 提高图片的可读性。
  • 内容网站可以通过文本检测来避免将带有标题的图像防止在文本头部，影响用户阅读。
  • web应用可以依靠文本检测来翻译文本, 比如翻译一家餐厅菜单。

进展情况

图形检测API的使用

FaceDetector、BarcodeDetector和TextDetector的接口被设计得非常简单，他们都提供了一个简单的异步方法detect，接收参数则是一个ImageBitmapSource(也就是CanvasImageSource，Blob或ImageData)。

对于FaceDetector和BarcodeDetector，传入可选参数给探测器的constructor，可以给底层的原生探测器透传参数。

• 如何使用FaceDetectorconst faceDetector = new FaceDetector({ // (可选) 检测到的人脸最大数量 maxDetectedFaces: 5, // (可选) 尝试使用缩小的比例或寻找大的特征来检测人脸，优先考虑速度而不是准确性 fastMode: false }); try { const faces = await faceDetector.detect(image); faces.forEach(face => console.log(face)); } catch (e) { console.error('Face detection failed:', e); }
• 如何使用BarcodeDetectorconst barcodeDetector = new BarcodeDetector({ // (可选) 探测的条形码格式. // 不是所有的浏览器都支持全部格式 formats: [ 'aztec', 'code_128', 'code_39', 'code_93', 'codabar', 'data_matrix', 'ean_13', 'ean_8', 'itf', 'pdf417', 'qr_code', 'upc_a', 'upc_e' ] }); try { const barcodes = await barcodeDetector.detect(image); barcodes.forEach(barcode => console.log(barcode)); } catch (e) { console.error('Barcode detection failed:', e); }
• 如何使用TextDetectorconst textDetector = new TextDetector(); try { const texts = await textDetector.detect(image); texts.forEach(text => console.log(text)); } catch (e) { console.error('Text detection failed:', e); }特性检测只检查图形检测api构造函数是否存在是不够的，因为在Linux和Chrome OS上的Chrome在图形检测API不起作用的情况下仍然会暴露出探测器接口（这是个bug），在这种情况下，我们建议使用以下特征检测的临时方案。const supported = await (async () => 'FaceDetector' in window && await new FaceDetector().detect(document.createElement('canvas')) .then(_ => true) .catch(e => e.name === 'NotSupportedError' ? false : true))();最佳实践所有的探测器都是异步工作的，他们不会阻塞主线程，所以不要依赖实时检测，而是让他们自己工作一段时间。 如果你是Web Workers的崇拜者，好消息是探测器也暴露在web worker里。探测结果可以被序列化并通过postMessage方法传会主线程中。这里有个演示demo。 并不是所有的平台都支持这些功能，所以一定要进行特征检测检查支持情况，并把图形检测API视为渐进增强的功能。比如，在某些平台上可能支持人脸检测，但是并不支持人脸标志检测（眼，鼻子，嘴巴），或者是可以识别文字的位置和存在，但是并不能识别文本的内容。相关资料
• Public explainer
• API Demo |API Demo source
• Tracking bug
• ChromeStatus.com entry
• Blink Component: Blink>ImageCapture