The QR Code (Quick Response) is alphanumeric, two-dimensional, square graphic code, invented by the Japanese company Denso Wave in 1994.

With these codes we meet more frequently. Today’s article is about how to work with QR codes in JavaScript. It’s quite simple with the right tools.

QR codes in JavaScript

There are many solutions for this purpose, so it’s good to try a proven solution in the form of JavaScript library / jQuery plug-in. Writing such a library on your own is quite ambiguous task, which takes more time and effort.

Let’s do a small review of the tools, which can really support our work with QR codes in JavaScript.

QRCode.js

This is a JavaScript library to generate QR codes. It has no dependencies. Here is an example using the configuration options:

var qrcode = new QRCode("test", {
    text: "https://javascript-html5-tutorial.com/",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

Website:

http://davidshimjs.github.io/qrcodejs/

Example:

jquery.qrcode.js

Another generator — a small jQuery plugin, available under the MIT license:

http://jeromeetienne.github.io/jquery-qrcode/

jquery('#qrcode').qrcode("Easy to use …");

jQuery.qrcode

Excellent project. Another jQuery plugin, that offers much more. It has a lot of configuration options. Programmer can customize many of the typical parameters for QR code, that will be generated.

Options:

{
    // 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 bg
    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
}

Project homepage:

http://larsjung.de/jquery-qrcode/

Reading QR code in JavaScript

OK, we talked about writing QR codes in JavaScript. What with reading? No problem! We also can deal with.

QR code API

We can generate and decode (read) QR codes using Web API: api.qrserver.com.

Recipes

URL:

http://goqr.me/api/

We can read QR code (assuming we have web camera) on-line, directly on the website:

http://webqr.com/

There is also a simple extension — qrcode-reader, but this is for node.js:

https://www.npmjs.org/package/qrcode-reader

Summary

OK! For our needs to work with QR codes in JavaScript, presented solutions were enough. We can enjoy working with QR codes even in JavaScript.