Содержание
QR-код является коротким и приятным (помимо весьма полезного) для быстрого ответа (их можно быстро прочитать с помощью смартфона). Да, они обычно отсканировано кем-то со смартфона ,но благодаря jsqrcode мы можем выполнить процесс сканирования без камеры и декодировать информацию из простых изображений (PNG или JPEG) (в формате base64, чтобы быть более точным и повысить точность), если вам когда-либо понадобится такая функция в любом из Ваша сумасшедшая компания (или собственные) проекты.
В этой статье вы узнаете, как легко сканировать QR-код по значению base64 с помощью jsqrcode.
Требования
Для достижения нашей цели мы будем зависеть от библиотека jsqrcode. Эта библиотека представляет собой реализацию JavaScript QRCode для HTML5, созданную Лазар Ласло. Вы можете скачать (или клонировать) его исходный код в официальном репозитории в Github здесь. Сам исходный код основан на 17 различных файлах JS (которые, очевидно, должны быть загружены в ваш HTML-документ с использованием тега script).
Реализация
В основном, чтобы использовать библиотеку, вам нужно будет использовать 2 строки, установить обратный вызов, который получает декодированные данные и предоставляет изображение base64 в качестве первого параметра в функции декодирования:
// set the callback that receives the decoded content as the tasks is async
qrcode.callback = function(decodedDATA){
alert(decodedDATA);
};
// Start decoding the base64 string
qrcode.decode("data:image/png;.......");В следующем фрагменте показано наиболее простое использование в простом HTML-фрагменте (не стесняйтесь загружать и тестировать его локально). Переменная imageURI содержит изображение QRCode (в данном случае PNG, но может быть JPG) в base64, и оно будет задано в качестве первого параметра в нашей пользовательской функции. decodeImageFromBase64,
Decode QRCode from image using javascript
// A qrcode with "site.com" as value in format base64 encoded
var imageURI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASIAAAEiAQMAAABncE31AAAABlBMVEX///8AAABVwtN+AAABA0lEQVRoge3ZUQ6CMAzG8SYcwCNx9R2JA5jU0a6ARKIP60z0/z0wZD+fmm1siBBCCPmfaMu93t/sEk8KKlv5jwrq3VT7jO4dqEy1lsT65mVS92vBUAOVKupbKmYm1DhljffpB/MXqp/aVmQfIuXNuo3qp46p4KIHlaFiTKzXRdrS4GszKlnJHCPBhkgF2z9RyWqvkNWlUdWrOqL6qZiP2kuoVWivGipT+cAosfsNOqHy1cm34txOuwBUhtKW2Hf52Zu8XLdRnVWxZtt3+duQ3gU1QD2d+kSFBDVUFX8ytZcj1Eh1OHMWQQ1Q1kSF2hb4ev5CdVTHFVl1/86FSleEEEJ+PQ/ANYzwx13NHQAAAABJRU5ErkJggg==";
/**
* The function decodeImageFromBase64 expects as first parameter a base64 string from a QRCode.
* As second parameter the callback that expects the data from the QRCode as first parameter.
*/
function decodeImageFromBase64(data, callback){
// set callback
qrcode.callback = callback;
// Start decoding
qrcode.decode(data)
}
// On button click, decode the qrCode from the base64 format.
document.getElementById("action").addEventListener('click',function(){
decodeImageFromBase64(imageURI,function(decodedInformation){
alert(decodedInformation);
});
},false);
От вас зависит, как преобразовать изображение (независимо от того, каким источником является ваш собственный веб-сайт из URL или локального файла) в его формат base64 для обработки библиотекой jsqrcode.
Обратите внимание, что вы можете работать с этим кодом сканера с API getUserMedia для создания живого сканера QR-кода с вашей веб-камерой, Однако это другая история, и вы можете увидеть рабочий пример на официальном демонстрационном сайте библиотеки.
Повеселись !
