Генератор QR-кода на JavaScript .
Вопрос к AI ChatGPT-4 : Тема: QR -код. Как появился, зачем нужен, сфера примененния. Генераторы QR-code на javascript — библиотека qrcode.min.js . Пример кода с описанием работы.
Ответ AI ChatGPT-4 :
- Что такое QR -код?
- Сфера применения QR-code.
- Пример кода генератор QR-code на JavaScript и qrcode.min.js.
- Демонстрация работы QR генератора онлайн.
QR-код (Quick Response Code), который в переводе с английского языка означает «быстрый отклик», является двухмерным штрих-кодом, который был разработан в 1994 году японской компанией Denso Wave для использования в автомобильной промышленности. Однако, со временем QR-коды стали широко применяться в различных отраслях и областях.
QR-коды позволяют хранить большое количество информации в кодированном виде, который может быть прочитан с помощью камеры на мобильных устройствах или специальных сканеров QR-кодов. Они зачастую используются для передачи URL-адресов, текстовых сообщений, контактной информации, бизнес-карт, а также для поддержки различных функций, например, авторизации или оплаты через мобильные приложения.
JavaScript-библиотека qrcode.min.js представляет собой инструмент, который позволяет генерировать QR-коды непосредственно на стороне клиента (в браузере). Она обеспечивает простой способ добавления QR-кодов на веб-страницы или веб-приложения.
Пример кода для генерации QR-кода с использованием библиотеки qrcode.min.js :
// Создание экземпляра QRCode var qrcode = new QRCode(document.getElementById("qrcode"), < text: "https://example.com", // Введите здесь текст или URL-адрес, который вы хотите закодировать в QR-код width: 256, // Ширина QR-кода в пикселях height: 256, // Высота QR-кода в пикселях colorDark: "#000000", // Цвет кода colorLight: "#ffffff", // Цвет фона correctLevel: QRCode.CorrectLevel.H, // уровень исправления ошибок >); // Отображение QR-кода function showQRCode()
Выше приведенный код создает элемент div с идентификатором «qrcode» на веб-странице, куда будет помещен сгенерированный QR-код. Затем с помощью JavaScript-кода, используя библиотеку qrcode.min.js , создается экземпляр QRCode , который принимает текст или URL -адрес для кодирования, указанную ширину и высоту кода. Функция ` showQRCode() ` служит для обновления QR-кода при изменении значения текстового поля с идентификатором «qr-text«.
Таким образом, этот код позволяет генерировать и отображать QR-код ы на веб-странице с помощью библиотеки qrcode.min.js .
Подключить библиотеку qrcode.min.js можно по CDN ссылке:
Ссылка на библиотеку: qrcode.js
Учим веб-приложения читать QR и штрихкоды
Штрихкоды и QR-коды есть почти везде. Мы покупаем товары, оплачиваем счета и даже покупки с их помощью. Поэтому нашим клиентам всё чаще требуются решения для их распознавания. На одном из наших проектов в 2020 году мы столкнулись с необходимостью добавить в веб-приложение сканирование штрих-кодов для учёта продукции. Для Loreal Academy мы проверили все доступные решения для чтения баркодов с экранов и ниже расскажем об их плюсах и минусах.
Если основной продукт — это мобильное приложение, проблемы распознавания нет. В большинстве современных смартфонов есть отдельные ядра для обработки графики и видео, и тогда основное приложение может задействовать их мощности для распознавания кодов.
Чаще всего любой корпоративный софт или CRM — это веб-приложение, поэтому для B2B требуются браузерные решения. Научить веб-приложение читать штрихкоды ещё пару лет назад было очень сложной задачей, поскольку получить доступ к вычислительным мощностям через браузер нельзя. Чаще всего бизнес выбирал для этих целей отдельные устройства, которые хорошо с этим справлялись, но стоили довольно дорого. Позже на помощь пришли смартфоны, но для них требовалось отдельное приложение, которое нужно синхронизировать с основной системой. А ещё есть платные сервисы и огромные библиотеки, о них и других SDK для декодирования штрихкодов расскажем ниже.
JavaScript библиотеки для распознавания изображений
Как это работает? Обычно это бесплатные библиотеки, которые легко интегрируются в веб-приложения, но плохо работают. Они пытаются распознать растровые изображения с камеры прямо в браузере, но справляются с этой задачей очень нестабильно. Например, одна из популярных библиотек по нашим тестам делала лишь одно верное распознавание из пяти. Также огромным минусом такого бесплатного ПО для считывания штрих-кодов является гигантский размер, из-за чего страдает производительность всего приложения.
Плюсы: лёгкая интеграция, низкая стоимость — чаще всего они бесплатны.
Минусы: крайне низкий процент верных распознаваний.
Платные сервисы
Как это работает? Вы делегируете распознавание стороннему сервису, который за деньги обрабатывает ваши изображения на своих серверах за плату. В приложение просто добавляется внешний API, похожий на платёжные шлюзы. Главное вовремя оплачивать эту услугу. Тарифы бывают разными: по количеству сканирований, по времени, есть даже поштучные предложения. Но такое ПО для сканирования штрихкодов обычно довольно дорогое.
Плюсы: простая интеграция, высокая производительность.
Минусы: высокая стоимость, необходимость отслеживать своевременную оплату сервиса.
Отдельное приложение
Как это работает? Можно создать приложение для считывания штрих кода на React Native, которое будет передавать сведения в основную систему. В этом случае распознавание работает стабильно, но появляется шов. Пользователю приходится выходить из основного приложения, переключаться на приложение для распознавания, и вообще брать мобильное устройство. Также может потребоваться авторизация. Это снижает скорость работы. Можно, конечно, сделать полноценную мобильную версию основного веб-приложения, но это долго, дорого, и требует дальнейшей поддержки. Как и маленькое приложение, которое возьмет на себя лишь функцию чтения кодов.
Плюсы: высокий процент распознавания, гибкость, огромные возможности кастомизации.
Минусы: время разработки, необходимость дальнейшей поддержки, стоимость.
Shape Detection API
Как это работает? Это API, разработанный Mozilla, который позволяет получить доступ к вычислительным ресурсам компьютера через браузер. В целом инструмент можно использовать для распознавания любых изображений и даже лиц, для штрихкодов есть отдельный Barcode Detection API, сделанный на той же платформе. На данный момент доступен на всех браузерах на основе Chromium.
Распространяется бесплатно и отлично справляется с распознаванием даже смазанных изображений. Наш проект для Loreal Academy стал одним из первых, в котором использовалась эта возможность. В продакшн он вышел через неделю после релиза API. До этого мы протестировали бета-версию, и оказалось, что это самый простой и удобный вариант.
Плюсы: бесплатный, высокий процент распознавания.
Минусы: поддерживается не всеми браузерами. Совместимость можно проверить здесь.
Вывод
Появление Shape Detection API перевернуло рынок браузерных решений для считывания штрихкодов. Они конкурируют и с платными сервисами, и с бесплатными решениями за счёт лёгкой интеграции и высокого процента верных распознаваний. Плюс, с ростом популярности алгоритм постоянно совершенствуется. Возможно, вскоре на рынке появятся подобные решения от других компаний, которые смогут предложить больше возможностей или форматов кодов.
Если вы в поиске оптимального решения для корпоративного софта, свяжитесь с нами через форму внизу, наши специалисты подберут инструменты, которые идеально подойдут вашему проекту.
Удивительно, что довольно долгое время штрихкоды были головной болью для разработчиков веб-приложений. Вероятно, на развитие инструментов для их распознавания повлияла пандемия и взрывная популярность сервисов доставки. Здорово, что мы смогли одними из первых протестировать и внедрить новый API в проект для нашего клиента
Как сканировать QR-коды в веб-браузерах с помощью веб-работников и jsQR – CloudSavvy IT
QR-коды стали намного более популярными в последние годы. Они широко используются для предоставления информации и облегчения регистрации. Хотя это чаще всего входит в состав собственных мобильных приложений, вы также можете включить QR-сканирование в свои веб-сайты.
Вот как можно использовать популярную библиотеку jsQR вместе с Web Workers, чтобы обеспечить высококачественное сканирование QR-кодов в Интернете. Мы предполагаем, что вы уже знакомы с основами JavaScript и у вас есть работающий сайт, на который можно добавить свой код.
1. Начать
Начните с загрузки библиотеки jsQR в предварительно скомпилированном распространяемом формате. Убедитесь, что он общедоступен на вашем веб-сервере; в этой статье мы предполагаем, что URL-адрес /jsQR.js . jsQR также доступен в виде пакета npm, если у вас настроена процедура сборки.
Этот пакет обеспечивает обнаружение в реальном времени QR-кодов, видимых в видеопотоке. Он извлекает данные из кода и доставляет их в ваше приложение.
2. Получите видео с камеры
Следующим шагом будет получение MediaStream из браузера. Использовать mediaDevices API для получения нового потока с камеры пользователя:
const getCamera = async () => if (!navigator.mediaDevices) throw new Error("mediaDevices API unavailable."); > const devices = await navigator.mediaDevices.enumerateDevices(); const cameras = devices.filter(d => (d.kind === "videoinput")); return cameras[0]; >;
Выбираем первую найденную камеру. Вы можете добавить дополнительную логику, чтобы разрешить выбор конкретной камеры, указанной пользователем. В реальном приложении вам также необходимо улучшить обработку ошибок, когда mediaDevices API недоступен. Это может быть связано с тем, что пользователь использует старый веб-браузер или навсегда заблокировал права доступа к камере.
Использовать getCamera() функция для получения видеопотока. Свяжите поток с элемент, чтобы его можно было воспроизвести и отобразить пользователю:
Обзор JavaScript-сканнеров штрихкодов
Недавно появилась идея сэкономить на ТСД на складе и попробовать использовать вместо них обычные дешёвые мобильники (даже без пылезащиты). Интерфейс планирую реализовать в виде веб-приложения (обычные веб-странички, HTML + CSS + JS).
Для того, чтобы всё получилось, необходимо научить веб-странички сканировать штрихкода через камеру телефона. Получить данные с камеры достаточно просто. Основная работа состоит в обработке кадра. Под катом обзор существующих готовых решений и много картинок.
quaggaJS
- Сайт проекта
- GitHub
На сайте проекта присутствует страничка, где можно загрузить образцы и попробовать библиотеку в деле. Пробуем образец №1. Необходимо указать некоторые настройки, ок, не вопрос.
В результате запуска определить штрихкод не удалось, но расположение штрихкода определено неплохо.
Пробуем образец №2. Как-то безрадостно.
Пробуем изменить настройки — поставить «Patch-Size» —> «Large». Нет. Правильный результат даёт, если поставить `Resolution (long side) = 800px`. Однако в действительности наибольшая сторона 640 пикселей.
Возможно он лучше работает с картинками высокого разрешения. Хорошо, делаем третий образец (образец №3).
Честно говоря я не знаю какой это тип штрихкода и попробовал все настройки — ШК не определился. Хорошо, давайте попробуем ещё один образец высокого разрешения (образец №4):
Почему-то ни с какими настройками результата добиться не удалось.
Попробуем «чистый» образец от следующей библиотеки (образец №5):
javascript-barcode-reader
- Сайт проекта
- GitHub
Или можно скачать всего один файлик: javascript-barcode-reader.min.js размером 10 445 байт.
У проекта есть страничка с примерами, однако картинки получены путём генерации кодов, а не с камеры. Нам такое не пойдёт.
Код для тестирования библиотеки
barcode-scan.html
function onLoadPage() < Image = document.getElementById('img1'); javascriptBarcodeReader( Image /* Image ID || HTML5 Image || HTML5 Canvas || HTML5 Canvas ImageData || Image URL */, < barcode: 'EAN-13', // 'Code-39' type: 'industrial', // задаётся для типа "Code-2of5", может быть "industrial" или "Interleaved" >) .then(code => < console.log(code) >) .catch(err => < console.log(err) >); > Образец №1. Библиотека выдаёт в консоль «Error: Failed to extract barcode!».
Образец №2. Библиотека выдаёт в консоль «Error: Failed to extract barcode!».
Образец №3. Библиотека выдаёт в консоль «Error: Failed to extract barcode!».
Образец №4. Библиотека выдаёт в консоль «601».
Хмм… может библиотека подключена неправильно? Попробуем вот такой образец:
Образец №5. Библиотека выдаёт в консоль «10023». Прикольно.
Dynamsoft Barcode Reader
Сайт проекта
Ядро библиотеки написано на WebAssembly (WASM) и только обёртки на JavaScript, что не так интересно. Знает форматы:
1D: Code 39, Code 93, Code 128, Codabar, EAN-8, EAN-13, UPC-A, UPC-E, Interleaved 2 of 5 (ITF), Industrial 2 of 5 (Code 2 of 5 Industry, Standard 2 of 5, Code 2 of 5), ITF-14;
2D: PDF417, QR Code, DataMatrix, Aztec.
Это платная библиотека, доступна по подписке, все типы штрихкодов стоят 2199$ в год, если только одномерные коды, то стоимость уменьшается до 1099$ в год. Есть страничка1 и страничка2 для экспериментов.
Образец №1. Да! Ответ правильный. Область обведена достаточно чётко.
Образец №2. Да. Ответ снова правильный. Область тоже обведена достаточно чётко.
Образец №3. Теперь мы знаем тип этого штрихкода.
Образец №4. Ответ тоже верный.
А ещё, судя по всему, можно вот так:
Однако первый образец распознан с ошибкой. И попробуем ещё вот так (оригинал картинки очень размыт):
Теперь мы знаем, что существует хотя бы одна работающая библиотека, хоть и платная.
tobytailor get_barcode_from_image.js
- DEMO
- GitHub
Пробуем первый образец:
Результат: 000204892734. Образец распознан.
Берём образец №2 (EAN-13). Только чтоб заработало, необходимо строку 32 скрипта написать так:
ctx.drawImage(img, 0, 0, width, height); // было так: ctx.drawImage(img, 0, 0); Результат: XXXXXXXXXXXX. Образец не распознан.
Результат: XXXXXXXXXXXX. Не распознан.
Давайте попробуем что-то простое:
Результат: не распознан. Возможно ему нужно подавать так, чтобы кроме штрихкода на картинке ничего не было, исключая и лишнее пространство.
И ещё один EAN-13:
EddieLa BarcodeReader
GitHub
Ещё одна бесплатная библиотека, с небольшим обращением от автора:
If you like and/or use this project for commercial purposes consider donating to support my work.
Если вам нравится и/или вы используете этот проект в коммерческих целях, рассмотрите возможность пожертвования для поддержки моей работы.
Знает форматы: Code128, Code93, Code39, Standard/Industrial 2 of 5, Interleaved 2 of 5, Codabar and EAN-13. Имеет страницу для экспериментов.
Образец №1. Область и тип определены верно. Код распознался с ошибкой.
Образец №2. Хороший результат. Правильно распознаны: область, тип штрихкода и сам штрихкод.
Образец №3. Отрицательно. Под углом не умеет.
Образец №4. Очень хорошо, образец распознан.
Образец №5. Образец распознан.
Ну что ж, похвально. Последние изменения в библиотеке произошли 3 года назад.
WebCodeCamJS
- Ссылка на проект
- GitHub
Образец №1: Не распознан.
Образец №2: Распознан правильно.
Образец №3: Не распознан.
Образец №4: Не распознан.
Образец №5: Распознан правильно.
Возможность распознавать QR-коды представляется интересной, поэтому мной было собрано 6 образцов для тестирования этой и последующих библиотек:
Образец №1: ничего.
Образец №2: Ничего.
Образец №3: Ничего.
Образец №4: Ничего.
Образец №5: Ничего.
Образец №6: Распознан.
Web QR
Страница проекта
Бесплатная библиотека. Заявлена генерация и распознавание QR-кодов. На странице проекта есть возможность попробовать библиотеку.
Ни один из шести образцов не был распознан. На странице есть генератор QR-кодов, вот полученные с помощью этого генератора коды распознаются.
UPD. Совместными усилиями в комментариях (спасибо TiesP ) удалось установить, что алгоритм работает, просто не умеет определять ориентацию кода. С учётом этого новые результаты такие:
Образец №1 — не распознан.
Образец №2 — не распознан.
Образец №3 — не распознан.
Образец №4 — не распознан.
Образец №5 — распознан.
Образец №6 — распознан.
Видимо есть ещё какие-то ограничения к фону, так как на бумаге определился и мой образец и образец, предоставленный в комментариях:
Итог
Это всё что я нашёл. Находил несколько реализаций, основанных на одной из вышеприведённых, например вот эта. Повторю, что основной критерий поиска — это вся работа должна выполняться на клиентской стороне через браузер и без дополнительной установки чего либо. То есть решение должно быть реализовано на JavaScript и/или Wasm (поэтому ZBar не подходит).
Если вам известна библиотека, отвечающая данным требованиям, и отсутствующая в статье — просьба сообщить.
Полученный рейтинг библиотек таков:
Статья состоялась благодаря интернет-магазину освещения Дивайн Лайт.