Считывать QR-коды из изображений _

Что такое QR-ридер?

QR-код — двумерный матричный штрихкод, определённый стандартом ISO/IEC 18004. Он кодирует текст, URL, контактные карточки, учётные данные Wi-Fi и другие короткие данные в виде сетки чёрно-белых квадратных модулей с данными коррекции ошибок Рида–Соломона, позволяющими декодировать символ даже при частичном повреждении или логотипе поверх кода. QR-ридер делает обратное: принимает изображение QR-символа и восстанавливает исходную строку данных. Этот ридер выполняет конвейер декодирования прямо в вашем браузере с помощью открытой библиотеки jsQR (около 130 КБ, лицензия MIT). Изображение, которое вы бросаете, вставляете или снимаете камерой, никогда не покидает вкладку. Шага загрузки нет. Откройте DevTools во время декодирования, и панель Network останется пустой — страница не делает никаких XHR, fetch или аналитических запросов, связанных с содержимым вашего изображения.

Как работает декодирование QR-кода?

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

1. Файл изображения (PNG, JPG, WebP или кадр камеры) отрисовывается на внеэкранном HTML-элементе <canvas>. Canvas API возвращает необработанные пиксельные данные в виде байтового массива RGBA.
2. Библиотека jsQR преобразует пиксельный массив в растровое полутоновое изображение и ищет три характерных квадрата шаблона поиска в углах QR-символа.
3. Обнаружив шаблоны поиска, декодер вычисляет перспективное преобразование и извлекает полную сетку модулей, считывая каждую ячейку как двоичный 0 или 1.
4. Сетка модулей разбирается согласно спецификации QR: сначала считывается информация о формате и версии, затем модули данных перемежаются и применяется коррекция ошибок Рида–Соломона.
5. Исправленные кодовые слова данных декодируются согласно режиму сегмента (числовой, буквенно-цифровой, байтовый или кандзи), давая исходную строку данных.
6. Затем инструмент анализирует данные с помощью набора регулярных выражений для определения типа содержимого (URL, учётные данные Wi-Fi, vCard и т. д.) и отображает результат с соответствующей кнопкой действия.

Зачем использовать QR-ридер в браузере?

• Байты изображения никогда не покидают ваше устройство. Вставьте QR с паролем Wi-Fi, внутренним URL или vCard с личным номером телефона — эти данные остаются на вашем компьютере. Другие QR-ридеры выполняют декодирование на удалённом сервере и сначала просят загрузить изображение — этот не просит.
• После загрузки страницы декодирование работает офлайн. Библиотека jsQR живёт в вашей вкладке. Можно отключить Wi-Fi, бросить QR-изображение на страницу и всё равно получить данные — удобно в самолётах, подвалах и везде, где корпоративная сеть блокирует сторонние сканеры.
• Если у вашего компьютера есть веб-камера, можно направить её на напечатанный QR-код и считать его без установки приложения и без разблокировки телефона. Поток камеры остаётся в браузере и останавливается в момент успешного декодирования кода.
• Ридер распознаёт URL, строки подключения к Wi-Fi, vCard, MeCard, mailto, SMS и геопозиции, отображая соответствующую кнопку действия. Открыть URL, скопировать пароль Wi-Fi, сохранить контактную карточку — что бы ни содержал QR-код.

Типичные сценарии использования QR-ридера

Всякий раз, когда нужно узнать, что содержит QR-код, не направляя на него телефон:

• Отладка только что сгенерированных кодов. Вставьте QR, который создало ваше приложение (или сделайте скриншот из соседнего Генератора QR-кодов), и убедитесь, что закодированный URL или данные совпадают с задуманным, прежде чем отправлять в печать, на упаковку или плакат.
• Восстановление учётных данных Wi-Fi. Просканируйте Wi-Fi QR со страницы настройки роутера, гостиничной карточки или фото объявления на Avito — ридер вернёт SSID, тип безопасности и пароль в виде обычного текста, который можно скопировать на другое устройство.
• Аудит и доступность. Декодируйте QR-коды на сканированных документах, этикетках товаров, конференц-бейджах или скриншотах публикаций, чтобы извлечь содержимое в таблицу, журнал соответствия или вспомогательное ПО — удобно, когда URL назначения является предметом проверки.

Как выглядит декодирование реального QR-кода?

Возьмём QR-код Wi-Fi, напечатанный на витрине кофейни. За символом скрывается полезная нагрузка согласно URI-схеме WIFI:: WIFI:S:CafeGuest;T:WPA;P:espresso2026;H:false;;. Сфотографируйте символ, бросьте изображение в зону загрузки выше — конвейер заработает: canvas считывает пиксели, jsQR находит три угловых шаблона поиска, перспективное преобразование выравнивает сетку, Рид–Соломон исправляет блики и артефакты сжатия, и байтовый сегмент даёт строку URI. Затем ридер обнаруживает префикс WIFI: и помечает тип как Wi-Fi, разбирает имя сети CafeGuest, тип безопасности WPA и пароль espresso2026. Кнопка Скопировать помещает пароль в буфер обмена для вставки в диалог выбора сети. Для QR с обычным URL, содержащим https://tools.ultim8soft.com, тот же конвейер возвращает метку типа URL и кнопку Открыть. В обоих случаях по сети прошла только загрузка страницы — декодирование выполнено локально.

Этот QR-ридер создан для одного: показать вам точное содержимое QR-кода в вашем браузере без серверов посередине. Бросьте изображение, вставьте из буфера обмена или включите веб-камеру — декодированное содержимое и его тип появятся на экране менее чем за секунду. Байты изображения не загружаются. Кадры камеры не записываются. Декодированные данные не проходят через чужие журналы по пути к вам. Используйте его вместе с соседним Генератором QR-кодов, когда нужно подтвердить, что закодированное совпадает с тем, что увидит другой человек.

Загружается ли изображение на сервер?

Нет. Изображение отрисовывается в HTML-canvas в памяти и декодируется полностью клиентским JavaScript во вкладке браузера. Ни один пиксель вашего изображения никогда не отправляется на сервер, не записывается и не сохраняется. Убедитесь сами, открыв DevTools и наблюдая за панелью Network при сбросе изображения: никаких XHR, fetch или аналитических запросов, связанных с содержимым файла.

Как работает сканирование через камеру?

При включении режима камеры браузер запрашивает разрешение на доступ к камере устройства через стандартный API getUserMedia. Видеокадры захватываются в внеэкранный canvas с разрешением до 640×480 и передаются в jsQR для декодирования. Каждый кадр удаляется в момент поступления следующего, а поток камеры останавливается при первом успешном декодировании. Кадры не записываются, не передаются, а запрос разрешения срабатывает только при включении переключателя — не при загрузке страницы.

Почему некоторые данные QR автоматически определяются как Wi-Fi или vCard?

Данные QR для учётных данных Wi-Fi следуют формату WIFI:S:ssid;T:type;P:password;;, а vCard начинается с BEGIN:VCARD. Этот ридер распознаёт эти шаблоны наряду с другими стандартными префиксами (mailto:, geo:, smsto:, MECARD:, https://) и автоматически определяет тип содержимого, чтобы кнопка действия соответствовала тому, что вы хотите сделать с данными.

Почему мой QR-код не сканируется?

Распространённые причины: изображение слишком маленькое или низкого разрешения (~100×100 пкс — минимум, 300×300+ сканируется надёжно), символ сильно повреждён или частично закрыт логотипом без достаточной коррекции ошибок, тихая зона (пустая граница вокруг модулей) отсутствует или обрезана, либо контраст между тёмными и светлыми модулями недостаточен. Для режима камеры улучшите освещение или приблизьте код к объективу — jsQR должен чётко разрешать отдельные модули, чтобы обнаружить шаблоны поиска.