Hello everybody!
today we are going to see something really interesting that someone in the past asked me via email.
We are going to generate a QR code using a jQuery plug in and then we are going to use a JavaScript library to read the very same QR code.
What do you think, is it interesting enough?
Generate the QR code
In order to generate the QR code we just need to use a small jQuery plug in called jquery.qrcode.js which is a "jQuery plugin for a pure browser qrcode generation".
As explained in the plug in page, the creation of a QR code is pretty straightforward:
1) include the plugin:
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
2) Insert the target container:
<div id="qrcode"></div>
3) Generate the QR code:
jquery('#qrcode').qrcode("the web thought");
The plug in can render the QR code in canvas or in table.Read a QR code
Reading a QR code is different stuff: we can use jsqrcode.js. The idea here is similar to the creation.
We need to include the libraries as explained in the above Github page (see Readme file).
To decode a QR code, we can use the following two lines of code:
qrcode.callback = function(data) { alert(data); };
qrcode.decode("qrcodeTest.png");
where the qrcodeTest.png is our QR code image that stays in the same folder as the web page containing the above decoding snippet.The callback function gets from the data parameter the value resulting from the QR code decode process.
Just to make things more clear, have a look at the following code:
<script src="jquery.js"></script>
<script type="text/javascript" src="
QRCode.js"></script>
<script type="text/javascript">
$(document).ready( function() {
qrcode.callback = showInfo;
$("#btnDecode").click(qrCodeDecoder);
})
function qrCodeDecoder() {
qrcode.decode("qrcodeTest.png")
}
function showInfo(data) {
alert(data);
}
</script>
</head>
<body>
<div>
<img id="qrcode" src="qrcodeTest.png"/>
</div>
<button id="btnDecode>Decode the QR Code</button>
After including the jQuery and the jsqrcode libraries, we use a button to trigger the call back and the decode of the png file (qrcodeTest.png).Ok, guys and gals. That's enough for today.
As usual if you need more info, just drop a line in the comment section below.
Hi Marco,
ReplyDeleteFor some reason. I can't get this script to work. you have a good example with ASP and jQuery. Thanks
Not working...
ReplyDeleteNot true. I've used it. See https://github.com/LazarSoft/jsqrcode
DeleteAll the scripts shown on the github.com site must me included in the exact order shown and you may not use IE as your browser. Then it worked for me.
DeleteHi,
ReplyDeleteI am currently working to develop a web based loyalty platform for my clients, they want to be able to supply each client with a unique number on there card and be able to scan a qr code with the cards that they are supplying the clients..
Now each card has to have its own unique qr code to be assigned to that client when they scan it, it almost has to be there log in pin if you know what i mean.
i am struggling with 2 things
1st, how do i assign 5000 cards with there own unique qr code
2nd, how will my web based loyalty program be able to read the qr code on the card!!
Please could you help me i am stuck between a rock and a hard place!!
The answer to your first question about how to generate 5000 cards, look at using GIUD's (Globally Unique Identifier ) and embed them into the text of the QR symbol. Be sure to verify that you are not getting duplicate responses if there is any sort of security required. Perhaps a cookie to GUID reference table can help here. Your OS should be able to generate the GUID's.
DeleteMy problem, I generate a QR Code with jquery('#qrcode').qrcode and I show it in my web page. What I need to do know is how to save that qr code as a file in my server. Because I'm going to have a form that asked the user if he wants us to send him the qr code to his/her email. He will introduce his email and then we will send the qr code generated to the email he/she told us.
ReplyDeleteHow can I save the qr code generated as an image file???
i want to know how to save the qr code to my library. My requirement is to not display on the web page, just create and save/upload to library
ReplyDelete