API распознавания штрих-кодов

API распознавания штрих-кодов определяет линейные и двумерные штрих-коды на изображениях.

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

Распознавание выполняется с помощью метода detect(), который принимает объект изображения; это может быть один из следующих объектов: HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, OffscreenCanvas, VideoFrame, Blob или ImageData. В конструктор BarcodeDetector можно передать необязательные параметры, чтобы указать, какие форматы штрих-кодов следует распознавать.

API распознавания штрих-кодов поддерживает следующие форматы штрих-кодов:

Формат	Описание	Изображение
aztec	Квадратный двумерный матричный код, соответствующий стандарту iso24778, с квадратным центральным кругом, напоминающим ацтекскую пирамиду. Не требует окружающего пустого поля.
code_128	Линейный (одномерный), двунаправленно декодируемый, самопроверяемый штрих-код, соответствующий стандарту iso15417, способный кодировать все 128 символов ASCII (отсюда и название).
code_39	Линейный (одномерный), самопроверяемый штрих-код, соответствующий стандарту iso16388. Это дискретный и переменной длины тип штрих-кода.
code_93	Линейная, непрерывная символика с переменной длиной, соответствующая стандарту bc5. Предлагает более высокую плотность информации, чем Code 128 и визуально похожий Code 39. Code 93 используется в основном почтой Канады для кодирования дополнительной информации о доставке.
codabar	Линейный штрих-код, представляющий символы от 0 до 9, A-D и символы - . $ / +
data_matrix	Двумерный штрих-код, независимый от ориентации, составленный из черных и белых модулей, расположенных в квадратной или прямоугольной форме, соответствующий стандарту iso16022.
ean_13	Линейный штрих-код, основанный на стандарте UPC-A и определенный в iso15420.
ean_8	Линейный штрих-код, определенный в iso15420 и производный от EAN-13.
itf	Непрерывный, самопроверяемый, двунаправленно декодируемый штрих-код. Он всегда кодирует 14 цифр.
pdf417	Двумерный формат непрерывной штрих-кодовой символики с несколькими строками и столбцами. Он двунаправленно декодируется и использует стандарт iso15438.
qr_code	Двумерный штрих-код, использующий стандарт iso18004. Кодируемая информация может быть текстом, URL или другими данными.
upc_a	Один из самых распространенных типов линейных штрих-кодов, широко применяемых в розничной торговле в США. Определенный в iso15420, он представляет цифры полосками черных и белых полос и пробелов, каждая цифра связана с уникальным шаблоном из 2 полос и 2 пробелов, ширина которых переменная. UPC-A может кодировать 12 цифр, уникально присвоенных каждому торговому предмету, и технически является подмножеством EAN-13 (коды UPC-A представлены в EAN-13 с первым символом, установленным в 0).
upc_e	Вариант UPC-A, определенный в iso15420, сжатый за счет удаления ненужных нулей для более компактного штрих-кода.
unknown	Это значение используется платформой для обозначения того, что она не знает или не определяет, какой формат штрих-кода распознается или поддерживается.

Вы можете проверить форматы, поддерживаемые пользовательским агентом, с помощью метода getSupportedFormats().

BarcodeDetector Экспериментальная

Интерфейс BarcodeDetector API распознавания штрих-кодов позволяет распознавать линейные и двумерные штрих-коды на изображениях.

Этот пример проверяет совместимость с браузером и создает новый объект детектора штрих-кодов с указанными поддерживаемыми форматами.

// check compatibility
if (!("BarcodeDetector" in globalThis)) {
  console.log("Barcode Detector is not supported by this browser.");
} else {
  console.log("Barcode Detector supported!");

  // create new detector
  const barcodeDetector = new BarcodeDetector({
    formats: ["code_39", "codabar", "ean_13"],
  });
}

Следующий пример вызывает метод getSupportedFormats() и регистрирует результаты в консоли.

// check supported types
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});

В этом примере используется метод detect() для распознавания штрих-кодов на заданном изображении. Эти штрих-коды перебираются, а данные штрих-кода регистрируются в консоли.

barcodeDetector
  .detect(imageEl)
  .then((barcodes) => {
    barcodes.forEach((barcode) => console.log(barcode.rawValue));
  })
  .catch((err) => {
    console.log(err);
  });

• barcodefaq.com: Сайт с информацией о различных штрихкодах и примерами различных типов.
• API распознавания форм: изображение стоит тысячи слов, лиц и штрихкодов