ClassyQR – generate QR code using jQuery

Generate QR code using jQuery and ClassyQR, and embed such bar codes directly on the website.

A solution to generate QR code using jQuery

ClassyQR is a simple jQuery plugin, that makes it easy to create QR Codes (two-dimensional barcode) from different kinds of data on your website or application.

QR codes are a popular type of two-dimensional barcode. They are also known as hardlinks or physical world hyperlinks. QR codes store up to 4,296 alphanumeric characters of arbitrary text. This text can be anything, for example URL, contact information, a telephone number etc.

QR codes can be read by an optical device with the appropriate software. Such devices range from dedicated QR code readers to mobile phones. Read more about QR codes.

A plugin to generate QR codes using jQuery
A plugin to generate QR codes using jQuery

Using ClassyQR

Include jQuery and ClassyQR plugin:

<script src="js/jquery.min.js"></script>
<script src="js/jquery.classyqr.min.js"></script>

Now, you have two possibilities of embedding a QR code.

1. Create the image tag that will be replaced with the QR code image.

<img src="#" id="qr1" alt="" />

For the last part you activate the ClassyQR() function on the element you just created, so, we trigger the function on the image with the id qr1.

$("#qr1").ClassyQR({
    type: 'text',
    text: 'Lorem ipsum'
});

2. Add a div with a specific id to your page, for example :

<div id="qr2"></div>

We trigger the function on the div with the id qr2 AND we add the create: true option, which signals the library to create the image tag inside the container div.

$("#qr2").ClassyQR({
    create: true,
    type: 'text',
    text: 'Lorem ipsum'
});

That’s it.

Demo and docs @ project page:

https://vox.space/files/jquery/classyqr

Get the plugin for generate QR code using jQuery from GitHub:

https://github.com/chaiyitsheng/jquery-classyqr

See also:

QR codes in JavaScript

Enjoy!

Share:Share on Facebook2Share on Google+1Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest1