How to create QR code with jQuery

QR CODE

QR code (abbreviated from Quick Response Code) is the trademark for a type of matrix barcode (or two-dimensional barcode) first designed for the automotive industry in Japan. A barcode is a machine-readable optical label that contains information about the item to which it is attached. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte / binary, and kanji) to efficiently store data; extensions may also be used.

QR codes can be used in Google's Android, BlackBerry OS, Nokia Symbian Belle, Apple iOS devices (iPhone/iPod/iPad), Microsoft Windows Phone, Google Goggles, 3rd party barcode scanners, and theNintendo 3DS. These devices support URL redirection, which allows QR codes to send metadata to existing applications on the device. mbarcode] is a QR code reader for the Maemo operating system. In Apple's iOS and Google's Android, a QR code reader is not natively included, but many paid and free apps are available with both the ability to scan the codes and hard-link to an external URL. BlackBerry 10 devices have a native QR reader as well as several third party readers. Windows Phone 7.5 is able to scan QR codes through the Bing search app's feature called Bing Vision.

CREATE QR CODE WITH JQUERY

jQuery.qrcode enables you to dynamically add QR codes to your website. Choose between rendering the code in a canvas or with divs. The latter will be fine even for older browser. The generated QR code will be in the least possible version required to encode the content (least number of blocks)..

OPTIONS & DEFAULT VALUE

{
 // render method: 'canvas', 'image' or 'div'
 render: 'canvas',

 // version range somewhere in 1 .. 40
 minVersion: 1,
 maxVersion: 40,

 // error correction level: 'L', 'M', 'Q' or 'H'
 ecLevel: 'L',

 // offset in pixel if drawn onto existing canvas
 left: 0,
 top: 0,

 // size in pixel
 size: 200,

 // code color or image element
 fill: '#000',

 // background color or image element, null for transparent background
 background: null,

 // content
 text: 'no text',

 // corner radius relative to module width: 0.0 .. 0.5
 radius: 0,

 // quiet zone in modules
 quiet: 0,

 // modes
 // 0: normal
 // 1: label strip
 // 2: label box
 // 3: image strip
 // 4: image box
 mode: 0,

 mSize: 0.1,
 mPosX: 0.5,
 mPosY: 0.5,

 label: 'no label',
 fontname: 'sans',
 fontcolor: '#000',

 image: null
}

USAGE

1. Add Jquery & QR code plugin to your HEAD tag

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/lrsjng/jquery-qrcode/v0.9.5/dist/jquery.qrcode.min.js'></script>

2. Add a container to your HTML

<div id="container"></div>

3. Call QR Code

$('#container').qrcode({
  "render": "div",
  "width": 100,
  "height": 100,
  "color": "#3a3",
  "text": "Welcome to Web68"
});

DEMO

See the Pen qrcode with jquery by Thanh Nguyen (@genievn) on CodePen.

Recent Post