[译] 提取图片中的文字、人脸或者条形码 —— 形状检测API

• 原文地址：A Picture is Worth a Thousand Words, Faces, and Barcodes—The Shape Detection API
• 原文做者：Thomas Steiner
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：jerryOnlyZRJ
• 校对者：Park-ma, haiyang-tju

注意：咱们目前正在使用此 API 的规范做为功能项目的一部分，随着这个新的 API 从设计转向实现，咱们将保持这篇文章的不断更新。

什么是形状检测 API？

借助 API navigator.mediaDevices.getUserMedia 和新版安卓的 chrome photo picker，从移动设备上的相机获取图像或者实时上传视频数据或本地图像变得至关容易。在此以前，这些动态的图像数据以及页面上的静态图像一直都是个咱们没法操做的黑盒，即便图像实际上可能包含许多有趣的特征，如人脸、条形码和文本。

过去，若是开发人员想要在客户端提取这些特征，例如构建一个二维码识别器，他们必须借助外部的 JavaScript 库。从性能的角度来看代价是昂贵的，而且会增长总体页面的资源体积。另外一方面，诸如 Android、iOS 和 macOS 这些操做系统，以及他们的相机模块中的硬件芯片，一般已经具备高性能和高度优化的特征检测器，例如 Android 的 FaceDetector 或者 iOS 自带的特征检测器 CIDetector。

而 Shape Detection API 作的即是调用这些原生实现，并将其转化为一组 JavaScript 接口。目前，这个 API 支持的功能是经过 FaceDetector 接口进行人脸检测，经过 BarcodeDetector 接口进行条形码检测以及经过 TextDetector 接口进行文本检测（光学字符识别，OCR）。

小提示：尽管文本检测是一个有趣的领域，但在目前要标准化的计算平台或字符集中，文本检测还不够稳定，这也使文本检测已经有一套单独的信息规范的缘由。

阅读更多相关解释

Shape Detection API 实践用例

如上所述，Shape Detection API 目前支持检测人脸、条形码和文本。如下列表包含了全部三个功能的用例示例：

• 人脸检测

  • 在线社交网络或照片共享网站一般会让用户在图像中标记出人物。经过边缘检测识别人脸，能使这项工做更为便捷。
  • 内容网站能够根据可能检测到的面部动态裁剪图像，而不是依赖于其余启发式方法，或者使用 Ken Burns 提出的经过平移或者缩放检测人脸。
  • 多媒体消息网站能够容许其用户在检测到的面部的不一样位置上添加太阳镜或胡须之类的有趣贴图。

• 条形码检测

  • 可以读取二维码的 Web 应用程序能够实现不少有趣的用例，如在线支付或 Web 导航，或使用条形码在应用程序上分享社交链接。
  • 购物应用能够容许其用户扫描实体店中物品的 EAN 或者 UPC 条形码，以在线比较价格。
  • 机场能够设立网络信息亭，乘客能够在那里扫描登机牌的 Aztec codes 以显示与其航班相关的个性化信息。

• 文字检测

  • 当没有提供其余描述时，在线社交网站能够经过将检测到的文本添加为 img[alt] 属性值来改善用户生成的图像内容的体验。
  • 内容网站可使用文本检测来避免将标题置于包含文本的主要图像之上。
  • Web 应用程序可使用文本检测来翻译文本，例如，翻译餐馆菜单。

当前进度

步骤	状态
一、建立解释器	完成
二、建立规范的初始草案	进行中
三、收集反馈并迭代	进行中
四、投入实验	进行中
5. 发布	未开始

如何使用 Shape Detection API

三个检测器向外暴露的接口 FaceDetector、BarcodeDetector 和 TextDetector 都很是类似，它们都提供了一个异步方法 detect，它接受一个 ImageBitmapSource 输入（或者是一个 CanvasImageSource、[Blob] 对象(w3c.github.io/FileAPI/#df…) 或者 ImageData）。

在使用 FaceDetector 和 BarcodeDetector 的状况下，可选参数能够被传递到所述检测器的构造函数中，其容许向底层原生检测器发起调用指示。

小提示：若是你的 ImageBitmapSource 来自一个 独立的脚本源 而且与 document 的源不一样，那么 detect 将会调用失败并抛出一个名为 SecurityError 的 DOMException 。若是你的图片对跨域设置了 CORS，那么你可使用 crossorigin 属性来请求 CORS 访问。

在项目里使用 FaceDetector

const faceDetector = new FaceDetector({
  // (Optional) Hint to try and limit the amount of detected faces
  // on the scene to this maximum number.
  maxDetectedFaces: 5,
  // (Optional) Hint to try and prioritize speed over accuracy
  // by, e.g., operating on a reduced scale or looking for large features.
  fastMode: false
});
try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face => console.log(face));
} catch (e) {
  console.error('Face detection failed:', e);
}
复制代码

在项目里使用 BarcodeDetector

const barcodeDetector = new BarcodeDetector({
  // (Optional) A series of barcode formats to search for.
  // Not all formats may be supported on all platforms
  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);
}
复制代码

在项目里使用 TextDetector

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => console.log(text));
} catch (e) {
  console.error('Text detection failed:', e);
}
复制代码

可用性检验

在使用 Shape Detection API 接口以前检查构造函数是否存在是必须的，由于虽然 Linux 和 Chrome OS 上的 Chrome 目前已经开放了检测器的接口，但它们却无法正常使用（bug）。做为临时措施，咱们建议在使用这些 API 以前应当这么作：

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 的忠实粉丝（难道还有人不是吗？）最棒的是检测器的接口也暴露在那里。检测结果也是可序列化的，所以能够经过 postMessage 将其从 worker 线程传回主线程。这里有个 demo 展现了一些简单实践。

并不是全部平台实现都支持全部功能，所以请务必仔细检查支持状况，并将 API 看做是渐进加强功能。例如，某些平台自己可能支持人脸检测，但不支持面部标志检测（眼睛、鼻子、嘴巴等等），或者能够识别文本的存在和位置，但不识别实际的文本内容。

小提示：此 API 是一种优化，并不能保证每一个用户均可以正常使用。指望开发人员将其与他们本身的图像识别代码相结合，当其可用时将其做为原生的一种优化手段。

意见反馈

咱们须要您的帮助，以确保 Shape Detection API 可以知足您的需求，而且咱们不会错过任何关键方案。

咱们须要你的帮助！ —— Shape Detection API 的当前设计是否知足您的需求？若是不能，请在 Shape Detection API repo 提交 issue 并提供尽量详细的信息。

咱们也很想知道您打算如何使用 Shape Detection API：

• 有一个独到的使用场景或者说你知道在哪些状况下能够用到它？
• 你打算用这个吗？
• 喜欢它，并想表达你对它的支持？

在 Shape Detection API WICG Discourse 上分享您的讨论与见解。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。