专栏首页腾讯IVWEB团队的专栏【译】让图片更有意义——图形检测API

【译】让图片更有意义——图形检测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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Node.js 编写 CLI 的实践

    通常而言,Node.js 的应用场景有前后端分离、海量web页面渲染服务、命令行工具和桌面端应用等等。本篇文章选取 CLI(Command Line Tools...

    腾讯IVWEB团队
  • 【译】npx简介:一种npm包的执行器

    那些将npm升级到npm@5.2.0或以上的用户,会发现与通常的npm平级的文件夹中还多了另一个二进制文件:npx

    腾讯IVWEB团队
  • [译] What's New for Node.js in 2020

    Node.js在2019年走到了第十个年头, npm上面的包数量也超过了一百万. NodeJS自身的下载量也在以每年40%的速度持续增长. 而对于NodeJS最...

    腾讯IVWEB团队
  • RHEL7安装11204 RAC的注意事项

    最近在某客户的RHEL7 + 11204 RAC环境上测试遇到不少的坑,好在都赶在正式上线前及时发现并处理完毕。 其中两个问题比较典型所以特别记录下:问题都和...

    Alfred Zhao
  • 基于功能点分析法(FPA)的度量体系建设简析

      随着信息技术的发展和应用系统规模的增大,无论是系统的建设方还是承建方,都迫切需要建设组织自身的数据度量体系,以便加强项目过程控制、提高生率、降低生产成本,提...

    软件成本造价评估
  • 富士康敲钟上市,高开44%涨停登顶A股第一大科技股 | 热点

    镁客网
  • jQuery常用插件

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • 学术资讯|摆好Pose却没管理好面部表情?腾讯优图Facelet-Bank人脸处理技术了解一下

    拍的照片看起来太严肃?蓄着胡子有点老?没关系,Facelet-Bank 可以通通帮你解决。近日,腾讯优图研发出一种数字人脸处理技术——Facelet-Bank,...

    优图实验室
  • Handsontable Dropdown with key-value pair

    hbbliyong
  • 手把手教你多套GEO数据集合并

    各位科研芝士的小伙伴,TCGA、GEO数据库的挖掘现如今已经十分火爆。不可否认,现如今各种培训层出不穷,几乎都是给你一个代码让你去跑,却并没有让你真正懂其精髓。...

    百味科研芝士

扫码关注云+社区

领取腾讯云代金券