
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:
Możemy odczytać kod QR (o ile posiadamy kamerę internetową) on-line, bezpośrednio na tej stronie:
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.