答案：Shape Detection API 是浏览器实验性功能，用于检测人脸和条码。需先检查支持性，通过 FaceDetector 识别面部位置，BarcodeDetector 读取二维码等格式，返回信息包括坐标与内容。仅适用于图像或 canvas，要求 CORS 安全，不支持通用几何形状识别，适合轻量级场景。
Shape Detection API 是现代浏览器提供的一项实验性功能，可用于识别图像中的基本几何形状，比如人脸、二维码、条形码等。目前该 API 主要支持 人脸检测 和 条码检测，并不直接识别圆形、矩形等通用几何图形。以下是使用它进行图像中特定形状识别的方法。
启用并检查浏览器支持
Shape Detection API 尚未在所有浏览器中广泛支持，主要可在基于 Chromium 的浏览器（如 Chrome）中使用。使用前应先检测是否可用。
if ('FaceDetector' in window) {console.log('人脸检测支持');
} else {
console.log('当前浏览器不支持人脸检测');
}
识别人脸
通过 FaceDetector 接口，可以从图片或视频帧中检测人脸位置。
const image = document.getElementById('myImage');const faceDetector = new FaceDetector();
faceDetector.detect(image)
.then(faces => {
faces.forEach(face => {
console.log('检测到人脸:', face.boundingBox);
});
})
.catch(err => {
console.error('人脸检测失败:', err);
});
返回的 face.boundingBox 是一个 DOMRectReadOnly 对象，表示人脸在图像中的位置和大小，可用于绘制边框或进一步处理。
识别条码
BarcodeDetector 可识别多种常见条码格式，如 QR Code、EAN、Code 128 等。
if ('BarcodeDetector' in window) {const barcodeDetector = new BarcodeDetector({
formats: ['qr_code', 'ean_13']
});
barcodeDetector.detect(image)
.then(barcodes => {
barcodes.forEach(barcode => {
console.log('条码内容:', barcode.rawValue);
console.log('类型:', barcode.format);
console.log('位置:', barcode.boundingBox);
});
})
.catch(err => console.error('条码检测失败:', err));
}
注意事项与限制
该 API 存在一些实际使用中的限制：
- 仅适用于图像元素或 canvas 帧，不能直接处理文件对象，需先渲染到页面
- 隐私安全机制要求图像资源符合 CORS 规范，跨域图片需服务器配置允许
- 目前不支持任意形状（如三角形、圆形）的通用识别，仅限人脸和条码
- 性能较好，适合实时视频流中的人脸追踪
基本上就这些。如果需要更复杂的形状分析（如 OpenCV 中的轮廓识别），建议结合 WebAssembly 版本的图像处理库，或使用后端服务处理。Shape Detection API 更适合轻量级、快速集成的人脸与条码场景。
