QR Code Fanatical Code vCard

Generator QR Code w Javascript – wizytówka vCard

QR Code Fanatical Code vCardO QRCode (ang. Quick Response) można poczytać na stronie jego twórców – Denso Wave Incorporated. W wielkim skrócie, zalety tego dwuwymiarowego kodu kreskowego:

  • Stosunkowa duża pojemność zakodowanych danych, m.in. do 4296 znaków alfanumerycznych.
  • Stosunkowo duża prędkość i wielokierunkowość odczytu kodu, dzięki pozycjonującym wzorom w narożnikach
  • Mała wielkość „wydruku” w porównaniu ze standardowym jednowymiarowym kodem kreskowym.
  • Odporność na uszkodzenia fragmentów kodu, w wersji optymistycznej nawet do 30%.
  • Duża i coraz większa popularność kodu na wypierających zwykłe telefony smartfonach.

Ale wszyscy już to wiemy, więc przystąpmy do sedna sprawy.

QR Code wygenerowane przez JavaScript

Przedstawiona przeze mnie metoda wykorzystuje bibliotekę JS stworzoną przez Kazuhiko Arase i udostępnioną na licencji MIT. Posiada ona pewne ograniczenia co do pojemności kodowanych danych (maksymalna ilość znaków odpowiada wersji 10 z ECC na poziomie L – tabelka), ale nadaje się do większości prostych zastosowań opartych o dynamiczne generowanie QR Code bez potrzeby tworzenia obrazków, bez instalowania dodatkowych bibliotek, bez obciążania serwera (wszystko jest generowane po stronie klienta) i bez zewnętrznych serwisów (np. Google Charts API – QR Code) m.in.:

  • Gotowe SMS z kodem dla usług Premium (SMS Premium, WAP Premium) – płatności komórką za produkty i usługi.
  • Wizytówki vCard z podstawowymi danymi z profilu osoby dostępnymi w internetowym katalogu, portalu itp.
  • Dane geolokalizacyjne lokali, hoteli, restauracji.
  • wiele innych… nawet offline z wykorzystaniem HTML5 Storage

HTML + CSS + JavaScipt → QR Code

Załączamy plik qrcode.js w nagłówku (head) naszej strony.

<script type="text/javascript" src="js/qrcode.js"></script>

Tworzymy nowy plik qrcode_print.js zawierający funkcję odpowiedzialną za wyświetlanie QR Code jako zwykłej tabelki HTML.

function draw_qrcode(text)
{
	var qr = new QRCode(10, QRErrorCorrectLevel.M);
	qr.addData(text);
	qr.make();
	document.write("<table class=\"qrcode\">");
	for (var r = 0; r < qr.getModuleCount(); r++)
	{
		document.write("<tr>");
		for (var c = 0; c < qr.getModuleCount(); c++)
		{
			if (qr.isDark(r, c))
			{
				document.write("<td class=\"qr1\"></td>");
			}
			else
			{
				document.write("<td class=\"qr0\"></td>");
			}
		}
		document.write("</tr>");
	}
	document.write("</table>");
}

W linijce 3 definiujemy wersję kodu oraz poziom ECC – odsyłam ponownie do tabelki. Dla vCard musimy praktycznie wycisnąć wszystko ze skryptu Kazuhiko, stąd wersja 10, ECC M (lub nawet L).

Załączamy qrcode_print.js w nagłówku.

<script type="text/javascript" src="js/qrcode_print.js"></script>

Aby wygenerowany kod stał się czytelny w stylach CSS doklejamy jeszcze 3 klasy:

.qrcode {border: 0; border-collapse: collapse; margin: 10px;}
.qr1 {border: 0; border-collapse: collapse; padding: 0; margin: 0; width: 3px; height: 3px; background-color: #000;}
.qr0 {border: 0; border-collapse: collapse; padding: 0; margin: 0; width: 3px; height: 3px; background-color: #fff;}

W miejscu, gdzie chcemy wyświetlić QR Code wklejamy:

<script type="text/javascript">
draw_qrcode("Tekst do zakodowania");
</script>

Wizytówka firmy jako vCard QR Code

Specyfikacja vCard dostępna jest w RFC2426. Poniżej wersja „popularna” zawierająca najpotrzebniejsze dane kontaktowe  firmy (na przykładzie Fanatical Code – celowo zły adres email).

BEGIN:VCARD
VERSION:3.0
N:Fanatical Code
TEL;TYPE=work,voice,pref,msg:+48883777990
EMAIL;TYPE=internet,pref:spam@fanaticalcode.com
ORG:Fanatical Code
URL:http://www.fanaticalcode.com
END:VCARD

Wsadźmy teraz ten vCard w naszą funkcję JS i lekko dozbrajamy adres email łamiąc string. Ważne, aby wszystkie dane były w jednej linii – parametr JavaScript. Docelowe łamanie można wymusić poprzez „\n”.

draw_qrcode("BEGIN:VCARD\nVERSION:3.0\nN:Fanatical Code\nTEL;TYPE=work,voice,pref,msg:+48883777990\nEMAIL;TYPE=internet,pref:spam"+"@"+"fanaticalcode.com\nORG:Fanatical Code\nURL:http://www.fanaticalcode.com\nEND:VCARD");

Efekt działania możecie sprawdzić na stronie głównej Fanatical Code – Kontakt.

Update
Może kogoś zainteresuje też: Generowanie QR Code w Javascript i HTML5 Canvas.

Autor

Kamil Skrzypiński

Fullstack developer, programista aplikacji internetowych i mobilnych. Zna się m.in. na Ruby on Rails, JavaScript, Objective-C, PHP, HTML5 i CSS3. Instalacja i konfiguracja serwera z mniej i bardziej popularnymi usługami, to też dla niego nie problem. Niegdyś zapalony radiowiec - głównie od strony techniczno-informatycznej.

4 myśli na temat “Generator QR Code w Javascript – wizytówka vCard”

  1. Trafiłem na ten blog całkowicie przez przypadek ale czytając ten wpis jestem pewien, że jeszcze nie raz tutaj zajrzę. Masa wartościowych wiadomości podana w przystępny sposób. W pełni podzielam zdanie autora publikacji.

  2. Lektura obowiązkowa dla tych którzy dopiero zaczynają swoją przygodę z zagadnieniami prezentowanymi w tym artykule. Masa, rzetelnej wiedzy.

  3. W linii 3 kodu jest błąd powinno być qrcode zamiast QRCode, linia powinna wyglądać np. tak:
    var qr = new qrcode(10, ‚M’);
    Poza tym wszystko fajnie działa, dziękuję

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *