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

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

13
0
0
0
条形码与二维码检测

基于 BarcodeDetector API,支持 13 种条形码和二维码格式的检测,包括 QR Code、EAN-13、EAN-8、Code 128、Code 39、PDF417、Data Matrix、Aztec、UPC-A、UPC-E、Code 93、Codabar 和 ITF。用户可以通过格式过滤功能选择只检测特定格式,提升检测效率和准确性。检测结果会以列表形式展示,包含解码内容(rawValue)和格式类型,并支持一键复制。在 Chrome 83+、Edge 83+ 等浏览器中已稳定支持,是本工具最成熟的功能模块。

人脸检测

基于 FaceDetector API,支持检测图片或视频流中的人脸位置和大小。提供两个关键参数:最大人脸数(默认为 5,可调整)和快速模式(fastMode)开关。快速模式下检测速度更快,适合实时视频流处理,但可能漏检较小或侧脸;精确模式检测精度更高,能发现更多人脸。需要注意的是,FaceDetector 需要在 Chrome 中开启实验性标志(chrome://flags/#enable-experimental-web-platform-features)才能使用。

文本检测

基于 TextDetector API,尝试识别图片中的文本区域。TextDetector 目前处于实验阶段,几乎所有主流浏览器都尚未原生支持。本工具在检测时会提示该 API 的支持状态,帮助开发者了解当前的兼容性现实。即使 TextDetector 不可用,用户仍然可以体验条形码和人脸检测功能。工具会在检测前检查 API 可用性,给出明确的提示信息。

实时摄像头扫描

除了静态图片检测,工具还支持开启摄像头进行实时扫描。开启后,摄像头画面持续被检测,条形码或二维码出现在画面中时会自动识别并展示结果。支持自动扫描模式,无需手动点击检测按钮。摄像头切换功能允许用户在前置和后置摄像头之间切换——扫描条形码建议使用后置摄像头以获得更好的对焦效果。实时扫描功能特别适合在移动端浏览器中测试条形码扫描的用户体验。

图片上传与拖拽

支持两种图片输入方式:点击上传按钮选择本地图片,或直接将图片拖拽到检测区域。上传后图片会显示在预览区,用户可以选择要执行的检测类型(条形码、人脸、文本)后点击检测按钮。拖拽交互提供了更加直观的用户体验,特别适合快速测试多张图片。图片数据仅在浏览器本地处理,不会上传到任何服务器,保障用户隐私。

检测参数配置

提供丰富的参数配置选项:人脸检测最大数量(1-20 可调)、快速模式开关(影响检测速度和精度的权衡)、条形码格式过滤(支持按住 Ctrl 多选,或不选检测全部格式)。这些参数直接影响检测的行为和结果,工具通过直观的表单控件让用户轻松调整。参数修改后,下一次检测会使用新的配置,无需刷新页面。

结果展示与复制

所有检测结果以结构化列表形式展示,包含检测类型、解码内容和格式信息。条形码结果会显示 rawValue(原始解码文本)和格式名称。检测结果支持一键复制到剪贴板,方便后续使用。当没有检测结果时,工具会显示友好的空状态提示。检测结果区域会实时更新,每次新的检测会替换之前的结果。