QR Code Fanatical Code vCard

Generowanie QR Code w Javascript i HTML5 Canvas

QR Code Fanatical Code vCardO QR Code i skrypcie Javascript do jego generowania pisałem już wcześniej – nic pod tym względem się nie zmieniło. Przyglądając się coraz szerszemu wykorzystywaniu HTML5 przez przeglądarki internetowe, postanowiłem zaprezentować kolejny sposób wyświetlania wygenerowanego kodu. Zostawiamy tabelkę ze stylami i zaczynamy rysowanie wykorzystując canvas. Miłośników Internet Explorer odsyłam do projektu Explorercanvas.

Domyślne wartości argumentów funkcji w JavaScript

Ot, taka ciekawostka, która wyszła w praniu. Jak nadać wartości domyślne argumentom funkcji w JavaScript? Nie wdając się w szczegóły, oto rozwiązanie:

Function.prototype.defaults = function()
{
	var _f = this;
	var _a = Array( _f.length-arguments.length ).concat( Array.prototype.slice.apply(arguments) );
	return function()
	{
		return _f.apply(_f, Array.prototype.slice.apply(arguments).concat( _a.slice(arguments.length, _a.length) ) );
	}
}

Z dobrodziejstwa tego fragmentu kodu, korzystamy następująco:

var something_to_do = function something_to_do(a, b)
{
	alert(a + b);
}.defaults("something", 3);

something_to_do();
// return: "something3"

QR Code w HTML5

Zaczynamy podobnie jak poprzednio od dołączenia odpowiednich plików. Aby się nie powtarzać odsyłam do HTML + CSS + JavaScipt → QR Code.

Do pliku qr_code_print.js dodamy sobie nową funkcję draw_qrcode_canvas:

var draw_qrcode_canvas = function draw_qrcode_canvas(text, element, background, color, px_per_module, margin, error_correction_level)
{
	var canvas = document.createElement("canvas");
	var context, container;

	if (! (canvas && (context = canvas.getContext("2d")) ) ) {
		alert("No canvas support in your web browser");
		return false;
	}

	if (! text) return false;

	var qr = new QRCode(10, error_correction_level);
	qr.addData(text);
	qr.make();

	var size = qr.getModuleCount() * px_per_module + 2 * margin;

	canvas.setAttribute('width', size);
	canvas.setAttribute('height', size);

	context.fillStyle = background;
	context.fillRect(0, 0, size, size);

	for (var r = 0; r < qr.getModuleCount(); r++)
	{
		for (var c = 0; c < qr.getModuleCount(); c++)
		{
			if (qr.isDark(r, c))
			{
				context.fillStyle = color;
				context.fillRect(c * px_per_module + margin, r * px_per_module + margin, px_per_module, px_per_module);
			}
		}
	}

	if (element && ( container = document.getElementById(element) )) container.appendChild(canvas);
	else document.body.appendChild(canvas);

}.defaults(null, null, "rgb(255, 255, 255)",  "rgb(0, 0, 0)", 4, 8, QRErrorCorrectLevel.M)
Atrybuty funkcji:
  • text – tekst, który będziemy kodować np. Vcard, iCalendar itd. Wymagany.
  • element – jeżeli chcemy canvas z QR Code osadzić w konkretnym elemencie strony, to podajemy id tego elementu. W innym wypadku canvas zostanie wsadzony w miejscu wywołania funkcji.
  • background – kolor tła. Może być podany w skali RGB, jako tekst (np. white) lub szesnastkowo #ffffff. Domyślnie: rgb(255, 255, 255)
  • color – kolor komórki/modułu kodu. Domyślnie: rgb(0, 0, 0)
  • px_per_module – wielkość pojedynczej komórki/modułu kodu w pikselach. Domyślnie: 4
  • margin – odstęp kodu od krawędzi obiektu canvas. Domyślnie: 8
  • error_correction_level – poziom korekcji błędów. Domyślnie: QRErrorCorrectLevel.M

Funkcję możemy wywyłać np. tak:

// Tylko tekst
draw_qrcode_canvas("To jest przykładowy tekst zakodowany w QR Code");

// Wizytówka vcard (+ prosty antyspam) oraz zmienione kolory
draw_qrcode_canvas("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", null, "white", "#500");

Jeżeli coś jest nie jasne, to proszę o pytanie w komentarzu.

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.

Dodaj komentarz

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