28
Mar
Mobile QR code reader in JavaScript, HTML5 for Mosync
zamieścił : Michał Irzykowski | komentarzy na ten temat:

W tym tutorialu pragnę przedstawić Państwu metodę na stworzenie mobilnego czytnika QR kodów do wieloplatformowego użycia dla aplikacji mobilnych.
Opracowany czytnik skierowany jest do użycia w środowisku MoSync. Czytnik działa na zasadzie wykonania zdjęcia, które następnie analizowane jest przez kod JS a następnie zwracany jest wynik w formie alertu. Czytnik z sukcesem przetestowany został na telefonie HTC Desire Z , Android 2.3.
- Implementacja czytnika opiera się na pobraniu wszystkich plików JS ze strony https://github.com/LazarSoft/jsqrcode/tree/master/src następnie w kodzie strony index.html (w sekcji head) umieszczamy następujący fragment kodu, który ma za zadanie załadowanie plików JS naszego czytnika do strony.
<script type=”text/javascript” src=”js/grid.js”></script><script type=”text/javascript” src=”js/version.js”></script><script type=”text/javascript” src=”js/detector.js”></script><script type=”text/javascript” src=”js/formatinf.js”></script><script type=”text/javascript” src=”js/errorlevel.js”></script><script type=”text/javascript” src=”js/bitmat.js”></script><script type=”text/javascript” src=”js/datablock.js”></script><script type=”text/javascript” src=”js/bmparser.js”></script><script type=”text/javascript” src=”js/datamask.js”></script><script type=”text/javascript” src=”js/rsdecoder.js”></script><script type=”text/javascript” src=”js/gf256poly.js”></script><script type=”text/javascript” src=”js/gf256.js”></script><script type=”text/javascript” src=”js/decoder.js”></script><script type=”text/javascript” src=”js/QRCode.js”></script><script type=”text/javascript” src=”js/findpat.js”></script><script type=”text/javascript” src=”js/alignpat.js”></script><script type=”text/javascript” src=”js/databr.js”></script>
-
Do poprawnego działania czytnika wymagane jest także umieszczenie biblioteki JQuery w sekcji head naszego pliku index.html, którą można pobrać tutaj http://jquery.com/download/
<script type=”text/javascript” charset=”utf-8″ src=”js/jquery.js”></script> -
Ostatnim etapem umieszczenia czytnika na stronie jest dodanie to treści pliku index.html kodu JS wywołującego funkcję czytnika a następnie przycisk uruchamiający skanowanie:<script type=”text/javascript”>var capture = null;var image = null;/*** Show camera*/function scanImage(){capture = navigator.device.capture;capture.captureImage(getImageSuccess, getImageFailure);}function getImageFailure(error){alert(‚Something went wrong…’);}function getImageSuccess(img){image = img;decodeImage();}function alertDecodeResult(result){alert(result);}function decodeImage(){imagePath = image[0][‚fullPath’]qrcode.callback = alertDecodeResult;qrcode.decode(imagePath);}</script>Przycisk:<button onclick=”scanImage()”>Skanuj</button>
Uwaga. Przedstawiony w niniejszym tutorialu kod napisany został dla środowiska MoSync, jednak można dostosować do do użycia w innych środowiskach.
Dodaj opinię...