QR Code Generation Using JavaScript

QR code stands for Quick Response Code. We can encode some text / string as QR Code and can retrieve it later by decoding the QR code. We can generate QR code using different programming languages in different ways but so far I know, the simplest way to generate QR code is using JavaScript.

QRCodeJs Library :

In this post, I am going to show you how to generate QR code using JavaScript. For this demo we are going to use library called QRCodeJS. In short QRCodeJS is a JavaScript library that makes generation of QRCode for given string easy using JavaScript.

Basic Usage:

Just create a new html file, include qrcode.js file and copy paste the below code into your html file..

<div id="qrcode"></div>
<script>
    new QRCode(document.getElementById('qrcode'), 'Hello, World');
</script>

It just needs user to write two lines of code.. The first line is DIV element in which we want to display our generated QR Code. The next thing we have to do is, creating the instance of QRCode object with our custom values. It takes two parameters, first one is HTML Element | Object in which we want to display QR Code and the second parameter is text | String which we want to encode as QR Code.

Live Demo

Type something in below input field...

Here, you can see/get the full code for above demo..

QR Code Generation With Custom Options :

You can customize QR Code generation by configuring QRCode object.

<div id="qrcode"></div>

<script>
   var qrcode = new QRCode(document.getElementById('qrcode'), {
   text: 'Hello, World',
   width: 500,
   height: 500,
   colorDark : 'brown',
   colorLight : 'lime',
   correctLevel : QRCode.CorrectLevel.H
});
</script>

Some other methods available in QRCode generator..

qrcode.clear(); // This method will clear the current code.
qrcode.makeCode('Hello, User'); // This will generate new code.

That's it for now.. Follow us on Facebook
Don't forget to share it with your friends... ☻

KodeMonk

Pages

Tuesday, January 24, 2017