HTML5 无原生 ShapeDetection 能力，Chromium 已于2023年10月彻底移除 FaceDetector 等实验接口；当前推荐 MediaPipe、TensorFlow.js、jsQR 或 OpenCV.js 等标准化替代方案。
HTML5 本身不提供 ShapeDetection 能力，所谓“HTML5 中的 ShapeDetection”实际是依赖浏览器特定实现的实验性接口——而这个接口已在 2023 年 10 月被 Chromium 彻底移除。当前（2026 年）任何尝试调用 FaceDetector、BarcodeDetector 或 TextDetector 都会返回 undefined，不是兼容问题，而是代码已从 Chrome/Edge 二进制中完全剥离。
别再找 ShapeDetectionAPI：它已不存在
在 Chrome DevTools 控制台执行 typeof FaceDetector，结果必为 "undefined"。过去教程中提到的 chrome://flags/#enable-shape-detection 已消失，启用无效；降级到 Chrome 92 也无济于事——相关模块早已被编译移除。
- 该 API 从未进入 Web 标准，仅在 Chromium 67–93 版本中作为实验功能短暂存在
- Safari、Firefox、Edge（非 Chromium 内核版）均未实现过该接口
- 所有基于
navigator.gpu或createFaceDetector()的写法都会直接报错或静默失败
识别矩形与边界：推荐替代技术栈
要稳定识别图像中的矩形（如证件边缘、表格框线、产品外轮廓）及特征边界，应转向标准化、可维护的方案：
-
MediaPipe Tasks Vision：使用
@mediapipe/tasks-vision加载ObjectDetector或自定义模型，支持实时视频流中的矩形物体检测（如身份证、书本），输出带归一化坐标的 bounding box - TensorFlow.js + BlazePose / COCO-SSD：适合人脸、通用物体（含矩形物品）检测；注意模型输出坐标需乘以原始视频宽高才能映射到 Canvas
- jsQR：轻量专注 QR/Code128 条码，可识别带边框的方形区域，无需模型加载，适合静态图快速提取
- OpenCV.js（WebAssembly）：对上传图片做二值化 → Canny 边缘检测 → HoughLinesP 直线提取 → 四线聚类+交点排序，适合精确提取身份证/票据四边
关键细节：迁移时必须处理的三件事
从旧 ShapeDetection 思维切换到新方案，容易卡在以下环节：
立即学习“前端免费学习笔记（深入）”；
-
权限触发时机：新方案必须显式调用
navigator.mediaDevices.getUserMedia({video: true})，且只能在用户手势（如 button click）后执行，否则被浏览器拒绝 -
坐标系转换：MediaPipe/TensorFlow 输出的是 [0,1] 归一化坐标；叠加到 Canvas 时需换算：
canvasX = bbox.x * video.videoWidth，并考虑 CSS 缩放与 devicePixelRatio 偏差 -
内存与帧率控制：每帧都新建 detector 实例或未释放纹理会导致内存泄漏；建议复用模型实例，用
requestAnimationFrame控制检测频率（如每 3 帧处理一次）
纯前端矩形边界识别简易流程（OpenCV.js 示例）
若目标明确为提取图像中最大矩形轮廓（如扫描件四边），可用 OpenCV.js 实现轻量闭环：
- 读取图片 →
cv.imread()转为 Mat - 灰度化 → 高斯模糊 → 自适应二值化（避免光照不均）
-
cv.findContours()提取所有轮廓，按面积排序取最大一个 -
cv.approxPolyDP()拟合多边形，筛选顶点数 ≈ 4 且角度接近直角的轮廓 - 用
cv.perspectiveTransform()或手动计算四交点，输出标准矩形坐标
该路径不依赖网络请求，全部在浏览器完成，适合 H5 端证件矫正、文档裁切等场景。
