Decode qrcode with Phonegap and JavaScript

javascript cordova qr-code

10,887

Solution 1

There is an official plugin for that... check Barcode Scanner

Solution 2

There's a Library that decodes Qr-Code in Javascript only I have used: https://github.com/LazarSoft/jsqrcode

As it is a Javascript only solution, it should work on phonegap too.

There's an online Demo here: http://webqr.com/

jsqrcode works with Data-URIs, so you could use it like this:

qrcode.decode("data:image/jpeg;base64," + imageData);

In your code:

function getPhoto(imageData) {
        alert(imageData);
        var smallImage = document.getElementById('cameraPic');
        smallImage.style.display = 'block';
        qrcode.callback=function(){alert('Decoded:'+this.result)};
        qrcode.decode("data:image/jpeg;base64," + imageData);
    }

10,887

Author by

user2549538

Updated on June 12, 2022

Comments

user2549538 almost 2 years

I am showing a button to open camera using phonegap :

document.addEventListener("deviceready", loaded, false);
function loaded() {
    pictureSource = navigator.camera.PictureSourceType;
    destinationType = navigator.camera.DestinationType;
}

function capturePhoto() {
    navigator.camera.getPicture(getPhoto, onFail, {
        quality : 50
    });
}
function getPhoto(imageData) {
    alert(imageData);
    var smallImage = document.getElementById('cameraPic');
    smallImage.style.display = 'block';
    smallImage.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
    alert('Failed because: ' + message);
}
   <body>
<div id="camera">
    <button class="camera-control" onclick="capturePhoto();">CapturePhoto</button>
    <div style="text-align: center; margin: 20px;">
    <img id="cameraPic" src="" style="width: auto; height: 120px;">     <img>
    </div></div>
  </body>

On click of button i want to decode a QR code and get show the decoded value on my page. I want to do this using javascript and phonegap only and dont want to use any native code.