[Перевод] Извлечение текста, лиц или штрих-кодов из изображений — API обнаружения формы

внешний интерфейс API Программа перевода самородков искусственный интеллект

Примечание. В настоящее время мы используем спецификацию этого API какфункциональный элементВ рамках этого нового API мы будем обновлять эту статью по мере перехода от проектирования к реализации.

Что такое API обнаружения формы?

С помощью APInavigator.mediaDevices.getUserMediaи более новые версии хрома для андроидаphoto picker, становится довольно легко получать изображения с камеры на мобильное устройство или загружать видеоданные или локальные изображения в режиме реального времени. До сих пор эти данные динамического изображения, наряду со статическими изображениями на странице, были черным ящиком, которым мы не могли манипулировать, даже несмотря на то, что изображения на самом деле могут содержать много интересных функций, таких как лица, штрих-коды и текст.

В прошлом, если разработчик хотел извлечь эти функции на стороне клиента, например,Считыватель QR-кода, им приходится прибегать к внешним библиотекам JavaScript. Это дорого с точки зрения производительности и увеличивает размер ресурсов всей страницы. С другой стороны, такие операционные системы, как Android, iOS и macOS, а также аппаратные чипы в их модулях камер обычно уже имеют высокопроизводительные и высокооптимизированные детекторы функций, такие как Android.FaceDetectorИли детектор функций, который поставляется с iOSCIDetector.

Что делает API обнаружения формы, так это вызывает эти нативные реализации и превращает их в набор интерфейсов JavaScript. В настоящее время функциональность, поддерживаемая этим API, осуществляется черезFaceDetectorинтерфейс для распознавания лиц, черезBarcodeDetectorинтерфейс для обнаружения штрих-кода иTextDetectorИнтерфейс для распознавания текста (оптическое распознавание символов, OCR).

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

Прочтите дополнительные пояснения по теме

Практические примеры использования API обнаружения формы

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

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

    • Онлайн-социальные сети или сайты обмена фотографиями часто позволяют пользователям отмечать людей на изображениях. Распознавание лиц с помощью обнаружения краев может упростить эту работу.
    • Вместо того, чтобы полагаться на другие эвристики или использоватьKen BurnsПредлагаемый метод обнаруживает лица путем панорамирования или масштабирования.
    • Сайт обмена мультимедийными сообщениями может позволить своим пользователям добавлять обнаруженные лица в разных местах.солнцезащитные очки или бородатакие забавные наклейки.

  • Обнаружение штрих-кода

    • Веб-приложение, способное считывать QR-коды, обеспечивает множество интересных вариантов использования, таких как онлайн-платежи или веб-навигация, или использование штрих-кодов для обмена социальными связями в приложении.
    • Приложения для покупок могут позволить своим пользователям сканировать товары в обычных магазинах.EANилиUPCштрих-код для сравнения цен онлайн.
    • Аэропорты могут установить веб-киоски, где пассажиры могут сканировать посадочные талоны.Aztec codesотображать персонализированную информацию о своем полете.

  • обнаружение текста

    • Если другое описание не предоставлено, сайты социальных сетей могут добавить обнаруженный текст какimg[alt]Значения атрибутов для улучшения восприятия контента изображений, созданного пользователями.
    • Контентные сайты могут использовать обнаружение текста, чтобы не размещать заголовки над основным изображением, содержащим текст.
    • Веб-приложение может использовать обнаружение текста для перевода текста, например, для перевода меню ресторана.

текущий прогресс

шаг условие
1. Создайте интерпретатор Заканчивать
2. Создайте первоначальный проект спецификации в ходе выполнения
3. Соберите отзывы и повторите в ходе выполнения
4. Инвестируйте в эксперименты в ходе выполнения
5. Опубликовать не началось

Как использовать API обнаружения формы

Три детектора выставлены наружуFaceDetector,BarcodeDetectorа такжеTextDetectorочень похожи, они оба предоставляют асинхронный методdetect, который принимаетImageBitmapSourceВход (или аCanvasImageSource, [Blob] объект(Мне 3 из .GitHub.IO/file API/#where…) илиImageData).

В использованииFaceDetectorа такжеBarcodeDetectorВ случае , в конструктор детектора могут быть переданы необязательные параметры, которые позволяют инициировать индикацию вызова базовому собственному детектору.

намекать:если вашImageBitmapSourceизАвтономный источник скриптаи отличается от источника документа, тоdetectзавершит вызов и выдаст ошибку SecurityErrorDOMException. Если ваша фотография устанавливает CORS в перекрестную домен, то вы можете использоватьcrossoriginсвойство для запроса доступа CORS.

использовать в проектеFaceDetector 

const faceDetector = new FaceDetector({
  // (Optional) Hint to try and limit the amount of detected faces
  // on the scene to this maximum number.
  maxDetectedFaces: 5,
  // (Optional) Hint to try and prioritize speed over accuracy
  // by, e.g., operating on a reduced scale or looking for large features.
  fastMode: false
});
try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face => console.log(face));
} catch (e) {
  console.error('Face detection failed:', e);
}

использовать в проектеBarcodeDetector 

const barcodeDetector = new BarcodeDetector({
  // (Optional) A series of barcode formats to search for.
  // Not all formats may be supported on all platforms
  formats: [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e'
  ]
});
try {
  const barcodes = await barcodeDetector.detect(image);
  barcodes.forEach(barcode => console.log(barcode));
} catch (e) {
  console.error('Barcode detection failed:', e);
}

использовать в проектеTextDetector 

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => console.log(text));
} catch (e) {
  console.error('Text detection failed:', e);
}

Проверка юзабилити

Перед использованием API-интерфейса Shape Detection необходимо проверить наличие конструктора, потому что, хотя Chrome на Linux и Chrome OS в настоящее время открывает интерфейс детектора, они не работают должным образом (bug). В качестве временной меры мы рекомендуем, прежде чем использовать эти API:

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();

лучшая практика

Все детекторы работают асинхронно, то есть не блокируют основной поток 🎉 , поэтому не стоит слишком зацикливаться на детектировании в реальном времени, а дайте детектору некоторое время для завершения своей работы.

Что, если выWeb WorkersБольшие поклонники (есть ли еще кто-нибудь?) Самое приятное, что интерфейс детектора там тоже открыт. Результаты тестов также можно сериализовать, поэтому их можно передавать черезpostMessageПередайте его обратно из рабочего потока в основной поток. вотdemoПоказаны некоторые простые практики.

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

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

Обратная связь

Нам нужна ваша помощь, чтобы гарантировать, что API обнаружения формы соответствует вашим потребностям, и мы не упустим ни одного ключевого сценария.

Мы нуждаемся в твоей помощи!- Соответствует ли существующий дизайн API обнаружения формы вашим потребностям? Если нет, пожалуйстаShape Detection API repoОпишите проблему как можно подробнее.

Мы также хотели бы знать, как вы планируете использовать API обнаружения форм:

  • У вас есть уникальный вариант использования или вы знаете, где его можно использовать?
  • Ты собираешься использовать это?
  • Любите его и хотите показать свою поддержку?

существуетShape Detection API WICG DiscourseПоделитесь своими обсуждениями и мнениями здесь.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

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

Категории