无需登录 数据私有 本地保存

形状检测 API 综合演示 - 人脸/条形码/文本检测

15
0
0
0
Shape Detection API

Shape Detection API 是一组浏览器原生 Web API,允许在客户端直接进行图像识别检测,包括人脸检测(FaceDetector)、条形码检测(BarcodeDetector)和文本检测(TextDetector)。所有检测均在本地完成,无需上传图像到服务器。在本工具中,这三种检测器通过选项卡切换,用户可以直观体验每种 API 的检测能力和效果差异。

BarcodeDetector

BarcodeDetector 是 Shape Detection API 中用于检测条形码和二维码的接口。支持 13 种格式,包括 QR Code、EAN-13、Code 128 等。在 Chrome 83+、Edge 83+ 中已稳定支持。通过调用 detect() 方法传入图片源(ImageBitmap、HTMLImageElement 等),返回包含 rawValue(解码内容)和 format(格式类型)的结果数组。本工具的核心功能之一就是基于此 API 进行条形码检测。

FaceDetector

FaceDetector 是用于人脸检测的接口,返回检测到的人脸边界框(boundingBox,包含 x、y、width、height)和置信度(confidence)。支持 fastMode 参数——开启时牺牲精度换取速度,适合实时视频流;关闭时检测更精确。需要在 Chrome 中开启实验性标志(chrome://flags/#enable-experimental-web-platform-features)才能使用。Firefox 和 Safari 目前不支持。

TextDetector

TextDetector 是用于文本检测的接口,尝试识别图片中的文本区域。返回文本的边界框和识别到的文字内容。目前 TextDetector 仍处于实验阶段,几乎没有浏览器原生支持。本工具在检测前会检查 API 可用性,如果不可用会给出明确提示。这是 Shape Detection API 中成熟度最低的部分,但在未来可能成为强大的 OCR 替代方案。

QR Code

QR Code(Quick Response Code)是一种二维条形码,可以存储 URL、文本、联系信息等多种数据。BarcodeDetector 原生支持 QR Code 检测,是最常用的二维码格式之一。在本工具的条形码检测模式下,QR Code 是预选的检测格式之一。扫描 QR Code 时,解码结果(rawValue)通常是完整的 URL 或文本内容。

fastMode(快速模式)

FaceDetector 的 fastMode 参数控制检测速度与精度的权衡。fastMode=true 时使用简化的检测算法,处理速度更快,适合实时视频流场景,但可能漏检较小的人脸或侧脸。fastMode=false 时使用完整的检测算法,精度更高,能检测到更多人脸,但处理时间更长。本工具在人脸检测模式下提供此参数的开关,让用户对比两种模式的效果差异。

rawValue(原始值)

rawValue 是 BarcodeDetector 检测结果中的核心属性,包含条形码或二维码解码后的原始文本内容。如果是 URL 类型的 QR Code,rawValue 就是完整的网址;如果是商品条形码(如 EAN-13),rawValue 是数字编码;如果是纯文本二维码,rawValue 就是文本内容。在本工具中,rawValue 会以列表形式展示在检测结果区域,并支持一键复制。

boundingBox(边界框)

boundingBox 是 FaceDetector 检测结果中的属性,描述检测到的人脸在图片中的位置和大小。包含四个值:x(左上角横坐标)、y(左上角纵坐标)、width(宽度)和 height(高度),单位为像素。通过 boundingBox 可以在原图上标注人脸的位置。在本工具中,人脸检测结果会显示 boundingBox 的尺寸信息,帮助用户理解检测的精度和范围。