怎样利用Shape Detection API进行图像形状识别？-js教程-PHP中文网

怎样利用Shape Detection API进行图像形状识别？

狼影

发布： 2025-09-25 16:03:01

原创

373人浏览过

答案：Shape Detection API 是浏览器实验性功能，用于检测人脸和条码。需先检查支持性，通过 FaceDetector 识别面部位置，BarcodeDetector 读取二维码等格式，返回信息包括坐标与内容。仅适用于图像或 canvas，要求 CORS 安全，不支持通用几何形状识别，适合轻量级场景。

怎样利用shape detection api进行图像形状识别？

Shape Detection API 是现代浏览器提供的一项实验性功能，可用于识别图像中的基本几何形状，比如人脸、二维码、条形码等。目前该 API 主要支持 人脸检测 和 条码检测，并不直接识别圆形、矩形等通用几何图形。以下是使用它进行图像中特定形状识别的方法。

启用并检查浏览器支持

Shape Detection API 尚未在所有浏览器中广泛支持，主要可在基于 Chromium 的浏览器（如 Chrome）中使用。使用前应先检测是否可用。

if ('FaceDetector' in window) {
console.log('人脸检测支持');
} else {
console.log('当前浏览器不支持人脸检测');
}

识别人脸

通过 FaceDetector 接口，可以从图片或视频帧中检测人脸位置。

返回的 face.boundingBox 是一个 DOMRectReadOnly 对象，表示人脸在图像中的位置和大小，可用于绘制边框或进一步处理。

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

识别条码

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));
}