API распознавания изображений в браузере

внешний интерфейс API браузер Chrome
API распознавания изображений в браузере

предисловие

В разработке интерфейса за последние несколько лет веб-приложения продолжали развиваться в направлении опыта Native APP, Например, наиболее обсуждаемый PWA в этом году, даже Apple постепенно интегрировала Service Worker в свое собственное браузерное сафари. При поддержке основных производителей браузеров возможности Интернета постепенно расширяются, в то же время с обновлением аппаратного обеспечения постепенно улучшается опыт работы с интерфейсными приложениями.

Однако во многих случаях по-прежнему требуется встроенная поддержка APP для аппаратных вызовов нижнего уровня и сложных операций, которые предоставляются для вызовов интерфейсных приложений в форме JSBridge в среде Webview. Это заставляет многие интерфейсные приложения полагаться только на веб-просмотр, настроенный Native APP. Конечно, производители браузеров также постоянно следят за ними, предоставляя множество базовых аппаратных интерфейсов и интерфейсов системного уровня непосредственно в Интернет, таких как Web Bluetooth API, Web Share API, Shape Detection API и так далее.

В этой статье я расскажу об API обнаружения фигур (Shape Detection API), интегрированном в Chrome.

распознавание образов

Фотографии и изображения составляют большую часть Интернета, и довольно многие из них содержат узнаваемые элементы, такие как лица, QR-коды или текст. Как вы можете себе представить, идентификация этих функций требует больших вычислительных ресурсов, но есть несколько интересных сценариев, таких как автоматическая пометка лиц на фотографиях или перенаправление на основе URL-адресов в изображениях. Производители аппаратного обеспечения уже давно поддерживают эти функции, но веб-приложения медленно используют преимущества этих аппаратных функций и вынуждены прибегать к некоторым сложным в использовании библиотекам для достижения своих целей.

Поскольку распознавание изображений требует ресурсов системного уровня и вычислительной мощности, с этим может справиться только собственный базовый API. В текущем веб-приложении, когда речь идет о функции распознавания изображений, изображение обычно загружается на сервер или передается в собственное приложение через JSBridge в веб-просмотре, и после вычисления результата оно возвращается в Интернет для продолжить обработку. Для Интернета его возможности слабы и должны полагаться на обработку на стороне сервера или JSBridge.Если обработка изображений может стать стандартным API Интернета, его возможности будут значительно улучшены.

В нативной разработке платформы Android и IOS напрямую предоставляют некоторые возможности для разработки приложений для распознавания изображений на системном уровне.Например, для распознавания QR-кода/штрих-кода Android может использоватьbarcode API, IOS можно использоватьCIQRCodeFeature API.

И почему не может быть набора стандартных js API для вызова базовых возможностей системы в веб-приложениях?

В 2016 году команда Chrome попыталась интегрировать API-интерфейс Shape Detection, напрямую предоставляемый в вызовы веб-разработки в браузере. В настоящее время API распознавания графики все еще находится в инкубационной и экспериментальной стадии в WICG.Если вы хотите включить эту функцию, вам необходимо скачать Canary-версию браузера Chrome (уууу. google.com/chrome/brow…), затем введите в адресную строкуchrome://flags/#enable-experimental-web-platform-features, нажмите «Включить» в функциях экспериментальной веб-платформы, чтобы включить экспериментальную функцию.

Затем проверьте, поддерживает ли браузер API, введите в консоли:

window.FaceDetector
window.BarcodeDetector
window.TextDetector

Если выходит LOG:

ƒ FaceDetector() { [native code] }
ƒ BarcodeDetector() { [native code] }
ƒ TextDetector() { [native code] }

Это означает, что вы уже можете вызывать API обнаружения формы в браузере.

Хотя API все еще находится в экспериментальной стадии (функции в экспериментальной стадии нестабильны, и, возможно, в конце концов он не будет формально интегрирован), мы, как фронтенд-разработчики новой эры, все еще готовы его опробовать.

СОВЕТ: необходимо загрузить следующие примерыКанарская версия Chrome, и включитеExperimental Web Platform featuresЭкспериментальная функция.

Возможности API

API обнаружения формы предоставляет три интерфейса для вызова:

  • FaceDetector: распознавание лиц;
  • BarcodeDetector: распознавание QR-кода/штрих-кода;
  • TextDetector: распознавание текста;

1. Распознавание лиц

FaceDetector — низкоуровневый класс компонентов платформы ускорения для распознавания лиц на изображениях, он принимает конфигурационный параметр FaceDetectorOptions, мы напрямую создаем экземпляр FaceDetector:

const faceDetector = new FaceDetector({
  fastMode: true,
  maxDetectedFaces: 10
});

Параметры в FaceDetectorOptions:

  • fastMode: [Boolean], указывающий, следует ли включить режим приоритета скорости (над точностью), который будет определяться меньшим масштабом (ближе к целевому графику) или путем нахождения большего целевого графика;
  • maxDetectedFaces: [Number] — максимальное количество распознанных лиц в текущей сцене;

Класс FaceDetector имеет методdetect, который принимает изображениеImageилиBlobобъект, используемый для обнаружения лиц на этом изображении, и возвращаетPromiseОбъект:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Shape Detection API Demo</title>
  <style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  </style>
</head>
<body>
  <img
    id="face-image"
    src="//opsqe9du9.bkt.clouddn.com/1.jpeg" alt="image"
    crossorigin="anonymous"
    style="width: 100%;"
  />
<script type="text/javascript">
window.onload = main();
function main () {
  const faceDetector = new FaceDetector({fastMode: true, maxDetectedFaces: 10});

  const image = document.getElementById('face-image');

  faceDetector.detect(image)
    .then(detectedFaces => {
      console.log(detectedFaces);
    })
    .catch((e) => {
      console.error("Face Detection failed, boo.", e);
    });
}
</script>
</body>
</html>

В приведенном выше примере: в HTML созданimgМетка (здесь следует отметить одну вещь: если изображение происходит из междоменного домена, вам нужно установитьcrossorigin="anonymous"), то получитеImageобъект, звонокfaceDetector.detectдля обнаружения лица на изображении и распечатки его после успешного распознаванияdetectedFacesполучать:

(5) [DetectedFace, DetectedFace, DetectedFace, DetectedFace, DetectedFace]
0: DetectedFace
  boundingBox: DOMRect
    bottom: 275
    height: 44
    left: 710
    right: 754
    top: 231
    width: 44
    x: 710
    y: 231
  landmarks: Array(3)
    0:
      location: {x: 729, y: 246}
      type: "eye"
    1: {location: {…}, type: "eye"}
    2: {location: {…}, type: "mouth"}
    length: 3
1: DetectedFace {boundingBox: DOMRect, landmarks: Array(3)}
2: DetectedFace {boundingBox: DOMRect, landmarks: Array(3)}
3: DetectedFace {boundingBox: DOMRect, landmarks: Array(3)}
4: DetectedFace {boundingBox: DOMRect, landmarks: Array(3)}
length: 5

Как видите, здесь было распознано 5 лиц, а возвращено одно.length === 5Массив из , каждый элемент массива представляет собой объект DetectedFace, содержащий два свойства:

  • boundingBox: объект DOMRect, который содержит информацию о положении (внизу, вверху, слева, справа, x, y) и размере (ширина, высота) области распознавания;
  • ориентиры: это массив, который содержит некоторую информацию об особенностях его лица, такую ​​как глаза (глаз), рот (рот) и информацию о его положении (x, y);

Полная демонстрация:Ищем в том же городе.GitHub.IO/Superstition-demo/…

2. Распознавание QR-кода/штрих-кода

BarcodeDetector — это низкоуровневый класс компонентов платформы ускорения, который распознает QR-коды или штрих-коды на изображениях, экземпляры которых мы создаем напрямую:

const barcodeDetector = new BarcodeDetector();

Как и FaceDetector, используйтеdetectфункцию обнаружения изображения, этот метод также принимаетImageилиBlobобъект, возвращаяPromiseОбъект:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Shape Detection API Demo</title>
  <style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  </style>
</head>
<body>

<img id="qrcode-image" crossorigin="anonymous" src="//opsqe9du9.bkt.clouddn.com/img-2.png" alt="QRCODE">

<script type="text/javascript">
window.onload = main;

function main () {
  const barcodeDetector = new BarcodeDetector();

  const image = document.getElementById('qrcode-image');

  barcodeDetector.detect(image)
    .then(detectedCodes => {
      console.log(detectedCodes);
    })
    .catch((e) => {
      console.error("Barcode Detection failed, boo.", e);
    })
}
</script>
</body>
</html>

И ранее описанные примеры, обнаружение приобретенного печатиdetectedCodes:

[DetectedBarcode]
0: DetectedBarcode
    boundingBox: DOMRect
      bottom: 375.4765348434448
      height: 362.06744384765625
      left: 9.409090042114258
      right: 371.47656440734863
      top: 13.409090995788574
      width: 362.0674743652344
      x: 9.409090042114258
      y: 13.409090995788574
    cornerPoints: Array(4)
      0: {x: 9.52997875213623, y: 13.529980659484863}
      1: {x: 370.59088134765625, y: 13.409090995788574}
      2: {x: 371.4765625, y: 375.4765319824219}
      3: {x: 9.409090042114258, y: 374.5908508300781}
      length: 4
    rawValue: "https://qiutc.me/"
length: 1

Каждый элемент полученного массива представляет собой объект DetectedBarcode распознанного QR-кода, содержащий три свойства:

  • DetectedBarcode: информация о местоположении QR-кода;
  • угловые точки: последовательность вершин распознанного штрих-кода;
  • rawValue: реальное значение, представленное QR-кодом, представляет собой строковое значение;

Полная демонстрация:Ищем в том же городе.GitHub.IO/Superstition-demo/…

3. Распознавание текста

TextDetector — это низкоуровневый компонент платформы ускорения, который распознает текст в изображениях, и мы создаем его экземпляр напрямую:

const textDetector = new TextDetector();

Как и FaceDetector, используйте функцию обнаружения для обнаружения изображений, этот метод также принимаетImageилиBlobобъект, возвращаяPromiseОбъект:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Shape Detection API Demo</title>
  <style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  </style>
</head>
<body>
<img id="text-image" crossorigin="anonymous" src="//opsqe9du9.bkt.clouddn.com/img-3.png" alt="TEXT">
<script type="text/javascript">
window.onload = main;
function main () {
  const textDetector = new TextDetector();
  const image = document.getElementById('text-image');
  textDetector.detect(image)
    .then(detectedTexts => {
      console.log(detectedTexts);
    })
    .catch((e) => {
      console.error("Text Detection failed, boo.", e);
    })
}
</script>
</body>
</html>

Как и в приведенном выше примере, распечатайте обнаруженныйdetectedTexts:

(12) [DetectedText, DetectedText, DetectedText, DetectedText, DetectedText, DetectedText, DetectedText, DetectedText, DetectedText, DetectedText, DetectedText, DetectedText]
0: DetectedText
  boundingBox: DOMRect {x: 190.78125, y: 42.1875, width: 1527.984375, height: 31.21875, top: 42.1875, …}
  cornerPoints: (4) [{…}, {…}, {…}, {…}]
  rawValue: ""
1: DetectedText {rawValue: "", boundingBox: DOMRect, cornerPoints: Array(4)}
2: DetectedText {rawValue: "", boundingBox: DOMRect, cornerPoints: Array(4)}
3: DetectedText {rawValue: "", boundingBox: DOMRect, cornerPoints: Array(4)}
4: DetectedText {rawValue: "", boundingBox: DOMRect, cornerPoints: Array(4)}
5: DetectedText {rawValue: "", boundingBox: DOMRect, cornerPoints: Array(4)}
6: DetectedText {rawValue: "", boundingBox: DOMRect, cornerPoints: Array(4)}
7: DetectedText {rawValue: "", boundingBox: DOMRect, cornerPoints: Array(4)}
8: DetectedText {rawValue: "", boundingBox: DOMRect, cornerPoints: Array(4)}
9: DetectedText {rawValue: "", boundingBox: DOMRect, cornerPoints: Array(4)}
10: DetectedText {rawValue: "", boundingBox: DOMRect, cornerPoints: Array(4)}
11: DetectedText {rawValue: "", boundingBox: DOMRect, cornerPoints: Array(4)}
length: 12

Каждый элемент полученного массива представляет собой объект распознанного текста DetectedText, содержащий три свойства:

  • DetectedBarcode: информация о местоположении текста;
  • угловые точки: информация о положении вершины;
  • rawValue: Реальное значение текста. Из демки мы обнаружили, что оно пустое. Должно быть, эта функция реализована не полностью;

Полная демонстрация:Ищем в том же городе.GitHub.IO/Superstition-demo/…

Суммировать

С текущей точки зрения, Shape Detection API все еще находится в экспериментальной стадии, и его функции несовершенны, но считается, что в ближайшие несколько лет эта функция будет постепенно улучшаться и применяться в производственной среде.

С API-интерфейсом определения формы сложность приложения во многих сценариях может быть значительно снижена, а веб-приложение можно сделать более независимым.

  • Используя распознавание лиц, мы можем более точно идентифицировать лица и давать более точные рекомендации при обработке изображений пользователями;
  • Применяя распознавание QR-кода/штрих-кода с вызовом камеры, вы можете напрямую получать информацию о сканировании на уровне интерфейса и выполнять такие операции, как оплата, прыжок и добавление друзей;
  • Применяя распознавание текста, мы можем напрямую реализовать функцию OCR на стороне пользователя;

С текущей точки зрения, все больше и больше низкоуровневых API могут использоваться непосредственно в среде браузера, а интерфейсные приложения могут напрямую использовать больше системных ресурсов и вызывать больше аппаратных интерфейсов. Это также тенденция в будущем.Когда браузеры предоставят Интернету больше возможностей, Интернет также сможет предоставить пользователям лучший опыт.

Ссылаться на

Категории