Kody QR w JavaScript

javascript-html5-tutorial.pl

Listopad 5th, 2014

Dominik-W

Kod QR / QR Code (ang. Quick Response, QR: szybka odpowiedź) jest to alfanumeryczny, dwuwymiarowy, kwadratowy kod graficzny wynaleziony przez japońską firmę Denso-Wave w 1994 roku.

Z takimi kodami spotykamy się coraz częściej. Dziś zajmiemy się właśnie tym tematem – jak pracować z kodami QR w JavaScript.

Kody QR w JavaScript

Istnieje sporo rozwiązań do tego celu, warto więc sięgnąć po gotowe, sprawdzone rozwiązanie w postaci biblioteki JavaScript / pluginu jQuery. Pisanie takiej biblioteki na własną rękę jest zadaniem ambitnym, na które potrzeba mieć trochę czasu.

Kody QR w JavaScript pomoże nam obsługiwać jedno z wybranych rozwiązań, przyjrzyjmy im się zatem.

QRCode.js

Jest to biblioteka JS do generowania kodów QR. Nie posiada zależności. Poniżej przykład użycia z konfiguracją opcji:

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

Strona projektu:

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

Przykład działania:

jquery.qrcode.js

Kolejnym generatorem jest niewielki plugin jQuery, dostępny na licencji MIT:

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

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

jQuery.qrcode

Znakomity projekt. Kolejny plugin jQuery, oferujący znacznie więcej. Posiada sporo możliwości konfiguracyjnych. Użytkownik może dostosować wiele typowych dla QR code parametrów generowanego kodu.

Oto opcje:

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

Strona projektu:

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

Odczyt QR code w JavaScript

Był zapis QR code w JavaScript. Co z odczytem? Również możemy sobie poradzić.

QR code API

Możemy generować i dekodować (odczytywać) kody QR dzęki web API: api.qrserver.com.

URL:

http://goqr.me/api/

Możemy odczytać kod QR (o ile posiadamy kamerę internetową) on-line, bezpośrednio na tej stronie:

http://webqr.com/

Jest także proste rozszerzenie qrcode-reader, jednak dotyczy już node.js.

Podsumowanie

To wszystko na dziś. Dla moich potrzeb pracy z kodami QR w JavaScript, przedstawione zasoby zupełnie wystarczały. Kody QR mają w sobie to coś, co sprawia że tak przyjemnie się ich używa.