Как генерировать и сканировать qr коды с помощью cordova

Содержание

1 Требования
2 Чтение QR-кода

QR-коды являются одним из самых популярных типов штрих-кодов, используемых сегодня, с возможностью кодировать до 4296 символов.

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

Требования

Для создания QR-кодов мы будем использовать плагин jQuery.qrcode, который позволит вам добавить сгенерированный qrcode через canvas в DOM. Ранее мы писали статью о том, как создать qr-код с использованием jQuery и как добавить его в dom. Если вы не фанат jQuery, вы можете использовать библиотеку qrcode.js, которая не требует jQuery.

jquery.qrcode.js — плагин jquery для генерации чистого кода браузера. Это позволяет вам легко добавлять qrcode на ваши веб-страницы. Он автономный, менее 4 Кб после minify + gzip, загрузка изображения отсутствует. Он не зависит от внешних служб, которые включаются и выключаются, или добавляют задержку при загрузке. Он основан на библиотеке, которая собирает qrcode на разных языках.

Нам нужен доступ к камере, чтобы отсканировать с помощью телефона qr-код, к счастью, уже есть плагин, который сделает все за вас. Для сканирования мы будем зависеть от phonegap-plugin-barcodescanner, который позволит вам использовать камеру для сканирования qr-кода. Используйте следующую команду для установки плагина в вашем проекте:

cordova plugin add phonegap-plugin-barcodescanner

Плагин Barcodescanner для PhoneGap (прочитайте документацию здесь) будет обрабатывать наш код QR. Все следующие платформы поддерживаются в плагине:

Android
IOS
Windows (Windows / Windows Phone 8.1 и Windows 10)
Windows Phone 8
BlackBerry 10
браузер

И ты готов к работе!

Чтение QR-кода

Помните, что этот плагин поддерживает больше, чем qr-коды, вы можете получить информацию о сканированном коде, используя следующий код:

 cordova.plugins.barcodeScanner.scan(
function (result) {
alert("A barcode has been scanned \n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
},
function (error) {
alert("Scanning failed: " + error);
}
);

Для обработки сканирования с помощью JavaScript, мы будем использовать следующий код:

cordova.plugins.barcodeScanner.scan(
function (result) {
if(!result.cancelled){
// In this case we only want to process QR Codes
if(result.format == "QR_CODE"){
var value = result.text;
// This is the retrieved content of the qr code
console.log(value);
}else{
alert("Sorry, only qr codes this time ;)");
}
}else{
alert("The user has dismissed the scan");
}
},
function (error) {
alert("An error ocurred: " + error);
}
);

После прикрепления этого кода к функции (по нажатию кнопки), сканер штрих-кода должен запуститься и отобразить что-то вроде: