Как создать QR Code Reader для вашего мобильного сайта

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

Такие компании, как Walmart и Amazon, используют эту технику, чтобы привлечь клиентов в свои онлайн и офлайн-магазины с помощью приложения для телефона. Другие компании, такие как Fedex и UPS, позволяют клиентам сканировать коды на пакетах с помощью приложения для телефона, вместо того чтобы вручную вводить длинные списки символов.

Смотрите, добавьте больше отзывчивых трюков в ваш пояс для инструментов

Больше не режущий край, это норма

Смотреть этот курс Смотреть этот курс

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

Сканирование QR-кода с вашего мобильного сайта

Вам не нужно приложение для телефона для сканирования QR-кодов — довольно просто создать свой собственный считыватель QR-кодов. Ваш веб-сайт, работающий на смартфоне с камерой и небольшим JavaScript, может сделать то же самое.

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

Требования к браузеру:
Ваши пользователи должны быть на iPhone под управлением iOS 6 или выше или на телефоне Android под управлением Android 3.0 или выше. Другие устройства не были проверены.

Если вы используете поддерживаемое устройство, нажмите его. В зависимости от вашего телефона, он либо сразу запустит камеру, либо попросит вас открыть камеру или просмотреть библиотеку фотографий. На неподдерживаемых устройствах браузер откроет обычное окно проводника файлов.

Если у вас нет QR-кода, удобного для сканирования, вот тот, который показывает первые 8 цифр числа Пи.

Создание QR Code Reader

Волшебство начинается с элемента загрузки файла. Мы добавили в него атрибут accept который сообщает браузеру, что нам нужны только изображения, и присваиваем ему атрибут capture который означает, что мы хотим, чтобы ввод был захвачен сейчас, а не загружать старую картинку из памяти телефона.

 <input type=file accept="image/*" capture=environment>

Украшение элемента Upload

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

Обратите внимание, что мы также добавили tabindex=-1 чтобы предотвратить случайный доступ пользователя к элементу загрузки файла с помощью клавиши tab , поскольку мы собираемся сделать его невидимым.

 <label class=qrcode-text-btn> <input type=file accept="image/*" capture=environment tabindex=-1> </label>

Имя класса qrcode-text-btn на внешнем элементе label позволяет нам qrcode-text-btn оба элемента с помощью следующего CSS:

 .qrcode-text-btn { display: inline-block; height: 1em; width: 1em; background: url(qr_icon.svg) 50% 50% no-repeat; cursor: pointer; } .qrcode-text-btn > input[type=file] { position: absolute; overflow: hidden; width: 1px; height: 1px; opacity: 0; }

В первом блоке CSS мы даем элементу label свойство display:inline-block , которое позволяет нам назначать высоту и ширину элементу.

Затем мы даем ему background изображение, которое представляет собой значок QR, который увидят пользователи нашего считывателя QR-кодов.

Во втором блоке CSS мы используем прямой селектор потомков ( > ), чтобы выбрать элемент загрузки файла и применить несколько свойств CSS, чтобы сделать этот элемент невидимым:

Мы даем ему свойство position:absolute , чтобы оно исключалось из обычного потока документов, что означает, что объекты вокруг него будут течь над ним и под ним, как если бы его не было.

Мы даем ему свойства width:1px и height:1px , чтобы он случайно не скрывал другие элементы на странице.

Мы даем ему свойство opacity:0 , чтобы оно стало прозрачным и, следовательно, скрытым. Обратите внимание, что мы не можем просто использовать display:none , потому что некоторые браузеры полностью отключат элемент загрузки файла, если мы сделаем это.

Представляем элемент ввода текста

Далее мы представляем элемент ввода текста, в котором будет размещена кнопка QR для нашего считывателя QR-кода.

 <input type=text class=qrcode-text ><label class=qrcode-text-btn> <input type=file accept="image/*" capture=environment tabindex=-1> </label>

Чаевые:
Любые пробельные символы, включая пустые строки, между 2 встроенными элементами создадут пробел, который вам может не понадобиться, и повлияют на нашу математику. Мы удалили пробел выше, переместив концевую скобку ( > ) на следующую строку, касаясь открывающей скобки другого элемента ( < ).

Вот как должен выглядеть наш читатель QR-кода:

Прямо сейчас кнопка QR находится справа от текстового элемента. Чтобы оно появилось внутри, мы сместим его в левую перекрывающуюся часть текстового поля, используя CSS.

 .qrcode-text { padding-right: 1.7em; margin-right: 0; vertical-align: middle; } .qrcode-text + .qrcode-text-btn { width: 1.7em; margin-left: -1.7em; vertical-align: middle; }

В первом блоке CSS мы даем текстовому элементу пробел справа от того места, где будет расположена кнопка QR. Без padding любой текст внутри текстового элемента будет сталкиваться с кнопкой QR и перекрывать ее.

Мы даем ему свойство margin-right:0 , потому что по умолчанию текстовый элемент имеет ненулевое поле, которое влияет на нашу математику.

Во втором блоке CSS мы используем селектор соседних элементов ( + ), чтобы выбрать и применить CSS к кнопке QR, чтобы она сместилась влево, чтобы перекрыть текстовый элемент.

Знай свои селекторы : С помощью селектора смежных элементов CSS применяется только тогда, когда кнопка QR находится рядом с текстовым элементом. Когда кнопка QR используется в другом месте, синтаксис селектора не будет применяться, и кнопка QR не будет смещаться влево без необходимости.

Нам нужно свойство vertical-align:middle как для текстового элемента, так и для кнопки QR, чтобы кнопка QR отображалась вертикально в центре текстового поля. Без этого кнопка QR сместится вверх, потому что по умолчанию нижняя часть всех элементов inline-block выровнена по вертикали с базовой линией любых встроенных элементов вокруг нее.

Обратите внимание, что мы также даем QR-кнопке большую width 1.7em чтобы дать пользователям большую цель касания. Сам значок QR не станет больше, потому что значок — это только изображение, центрированное на кнопке, а сама кнопка прозрачна. При этом рендеринге можно наблюдать действительную область, активируемую щелчком, где кнопке был присвоен зеленый цвет фона.

Включая зависимые библиотеки JavaScript

Секрет чтения QR-кодов — математика, а заменой математики являются библиотеки с открытым исходным кодом. Для чтения QR-кодов мы будем использовать порт JavaScript библиотеки обработки изображений на основе Java, написанной ZXing. Версия JavaScript была портирована Лазаром Ласло.

Поскольку библиотека JavaScript состоит из 17 файлов, я позволил себе слить их в один файл, обернуть код в анонимную функцию, чтобы предотвратить загрязнение глобального пространства имен, и поместить файл через ограничитель Google Closure, чтобы уменьшить размер файла.

Некоторые незначительные изменения в библиотеке

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

В qrcode.js были внесены два важных изменения в эти 2 строки:

 qrcode.result = "error decoding QR Code"; //... qrcode.callback("Failed to load the image");

Эти строки были заменены объектами Error :

 qrcode.result = Error("error decoding QR Code"); //... qrcode.callback(Error("Failed to load the image"));

Теперь я могу определить в своей функции обратного вызова, произошла ли ошибка, просто проверив, является ли полезная нагрузка обратного вызова экземпляром Error или нет.

Эти изменения можно найти в этой ветке библиотеки.

Добавление тега скрипта

Чтобы использовать библиотеку в нашей программе чтения QR-кодов, нам сначала нужно включить ее в наш HTML-код с помощью обычного тега script:

 <script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"> </script>

Подключение обработчиков событий

Затем нам нужно подключиться к событию onchange элемента загрузки файла:

 <input type=file accept="image/*" capture=environment onchange="openQRCamera(this);" tabindex=-1>

Затем мы вводим функцию JavaScript, которая считывает изображение в элементе загрузки файла и передает его в библиотеку QR.

 function openQRCamera(node) { var reader = new FileReader(); reader.onload = function() { node.value = ""; qrcode.callback = function(res) { if(res instanceof Error) { alert("No QR code found. Please make sure the QR code is within the camera's frame and try again."); } else { node.parentNode.previousElementSibling.value = res; } }; qrcode.decode(reader.result); }; reader.readAsDataURL(node.files[0]); }

В этой функции мы создаем объект FileReader который может читать двоичные данные файла.

Как только FileReader завершит чтение файла, мы назначаем обратный вызов для библиотеки QR и отправляем содержимое файла в функцию decode библиотеки. Библиотека вызовет наш обратный вызов и либо вернет объект Error либо вернет значение QR-кода в виде строки.

В случае успеха мы устанавливаем текстовый элемент в значение QR-кода. Если возникает ошибка, мы показываем окно с предупреждением для повторной попытки.

Отображение полезного оповещения для начинающих

Чтобы наш читатель QR-кода стал немного более интуитивно понятным для новичков, мы подключимся к событию onclick в элементе загрузки и покажем окно с предупреждением до появления камеры, описывающее, как использовать камеру.

 <input type=file accept="image/*" capture=environment onclick="return showQRIntro();" onchange="openQRCamera(this);" tabindex=-1>

Мы будем использовать окно подтверждения вместо окна предупреждения, чтобы пользователь мог прервать его, если захочет, после прочтения подсказки.

 function showQRIntro() { return confirm("Use your camera to take a picture of a QR code."); }

Смотрите QR Code Reader в действии

Вот как выглядит наш читатель QR-кода:

Как насчет неподдерживаемых браузеров?

Прямо сейчас кнопка QR будет отображаться во всех браузерах независимо от поддержки. Нам нужен способ скрыть это в неподдерживаемых браузерах.

Мы не можем использовать обнаружение функций, потому что только iOS поддерживает атрибут capture , а для Android мы полагаемся на поведение по умолчанию браузеров, производных от webkit, работающих на мобильных устройствах, когда лист выбора отображается с камерой как одним из вариантов.

На планшетных и портативных устройствах Windows стандартным поведением является отображение окна проводника, которое не помогает, поскольку не предлагает опцию камеры.

Лучше всего использовать функцию определения размера экрана и показывать кнопку QR только на смартфонах, поскольку рыночная доля устройств, не относящихся к iOS и не Android, составляет всего 0,7% по данным IDC (ноябрь 2016 г.) , и это также имеет смысл с момента фотографирования с планшет или ноутбук сложны, учитывая их размер и вес. Мы будем использовать произвольный обрезанный размер шириной 750 пикселей, который поддерживает iPhone 6 Plus (ширина 736 пикселей) и исключает нетбуки (ширина 800 пикселей в портретной ориентации).

Для этого мы будем использовать медиазапросы CSS.

Использование CSS Media Queries

Сначала мы определяем медиа-запрос для случая, когда ширина устройства составляет 750 пикселей или меньше.

 @media only screen and (max-device-width:750px) { /* previous CSS code goes here */ }

Нам нужно взять весь код CSS, который мы написали ранее, и поместить его в фигурные скобки выше. Это приводит к тому, что CSS применяется только тогда, когда ширина устройства меньше 750 пикселей.

Теперь нам нужно добавить дополнительный CSS-код вне этого блока медиазапроса, чтобы скрыть кнопку QR по умолчанию. Поместите этот код непосредственно перед блоком медиа-запроса.

 .qrcode-text-btn { display: none; } @media only screen and (max-device-width:750px) { /* ... */

Обеспечить согласованность для дизайнеров

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

 .qrcode-text { box-sizing: border-box; vertical-align: middle; } @media only screen and (max-device-width:750px) { /* ... */

Мы дали qrcode-text свойство box-sizing:border-box , которое гарантирует, что его вычисление ширины включает любые отступы. Это означает, что когда текстовый элемент получает дополнительное заполнение (когда мы ранее использовали padding-right:1.7em ), ширина текстового элемента не будет больше, а вместо этого украдет пространство из его внутренних размеров.

Мы дали ему свойство vertical-align:middle , чтобы его вертикальное выравнивание было согласованным независимо от того, находится ли оно на поддерживаемом или неподдерживаемом устройстве.

Вывод

Так что у нас это есть, ваш собственный читатель QR-кода для вашего мобильного сайта.

QR-коды существуют уже много лет, а код обработки изображений, написанный ZXing, впервые был перенесен на JavaScript почти 6 лет назад. Лазарь Ласло, автор порта JavaScript, даже имеет доказательство своей концепции на своем веб-сайте, используя различные технологии HTML для захвата изображений и обработки QR-кодов.

Методика, показанная здесь, — это просто переосмысление современных технологий в более привлекательный и удобный для пользователя формат для пользователя.

Есть еще возможности для улучшения нашего считывателя QR-кода. Мы можем написать код, чтобы использовать getUserMedia для захвата изображений с камеры, что более универсально, но эта технология новее и исключит старые устройства iPhone и Android.

Код обработки изображения также может быть улучшен для более быстрого обнаружения и лучшей обработки фонового шума.

Такие изменения можно оставить для будущей статьи.

Загружаемые активы

Внешние ссылки

Эта статья была рецензирована Джулио Майнарди . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!