JavaScript QrCode Generator

Introduction

JavaScript QrCode Generator is a QrCode script that generates QrCode images using the Google Chart API. The script can generate the QrCode URL or the image itself. It's possible to customize the size, encoding and also the type of the QrCode. The script support Text, Email, SMS, Phone, MeCard, GeoLocation and Wifi QrCodes.

Setup

Copy the QrCode Generator file to a directory of your choice. In the page where you want to create QrCodes, include that file.



Now you can create your QrCode object. First, start by initializing the QrCode Generator Class. It accepts a JavaScript Object as an argument. Below is an example of an argument object that has the two essential parameters: The type and the value. You can't generate QrCodes without these two parameters.

/**
 * The argument object
 */ 
var param = {
	type: 'text',
	value: 'This is a QrCode'
};
/**
 * Create the QrCode Object using the param variable.
 */
var myqrcode = new Qrcode(param);
/**
 * This code displays the QrCode URL in your console or on an alert.
 */
if (console) {
  console.info(myqrcode);
} else {
  alert(myqrcode);
}

This code creates the QrCode, but it doesn't display it. The QrCode object now (myqrcode) returns the QrCode URL that you might want to use it. However, you are probably looking to display the QrCode image. There are two ways how you can achieve that. The first way is to create the image object and insert it somewhere in your document. The second way, which is easier, is to specify the image element where you want to display the QrCode.

Create the image object

First, you need a DIV or any other element where you'll insert your image.



Next, you'll next to use JavaScript to insert to create the QrCode image and insert it.

var param = {
	type: 'text',
	value: 'This is a QrCode'
};
var myqrcode = new Qrcode(param);
/**
 * Use raw JavaScript method to insert the QrCode image.
 */
document.getElementById('qrcode').appendChild(myqrcode.to_image());
Direct insert of the QrCode image

This is the same method as the previous one, however, the script does the inserting for you. Assuming that you have an HTML element with an ID 'qrcode'.

var param = {
	type: 'text',
	value: 'This is a QrCode'
};
var myqrcode = new Qrcode(param);
/**
 * Use the script built-in function to insert the QrCode.
 */
myqrcode.insert_to('qrcode');

Customizing the QrCode

QrCode Size: You can change your QrCode height and width size. It's recommanded, however, to keep both these values equal. The default values are 250x250. The QrCode size parameter is an associative array that accepts two values: height and width.
QrCode Encoding: How to encode the data. The available values are UTF-8, Shift_JIS and ISO-8859-1. The default value is UTF-8.

var param = {
	type: 'text',
	value: 'This is a QrCode',
	size: {
		height: 140,
		width: 140
	},
	encoding: 'UTF-8'
};
var myqrcode = new Qrcode(param);
myqrcode.insert_to('qrcode');

QrCode Types

Text: This is the most basic type. It accepts a string value.

/**
 * Text type: Accepts string as a value.
 */
var param = {
	type: 'text',
	value: 'This is a QrCode'
};
var myqrcode = new Qrcode(param);
myqrcode.insert_to('qrcode');

Email: Creates an Email QrCode. The QrCode can hold the Email Address, as well as the body of the email.

var param = {
	type: 'email',
	value: {
		'email': 'omar.abid2006@gmail.com',
		'body': 'Hi!'
	}
};
var myqrcode = new Qrcode(param);
myqrcode.insert_to('qrcode');

Call: Creates a QrCode with a Phone number to make a call. Make the value a string if you want to use the number 0 at first.

var param = {
	type: 'phone',
	value: 21698667534
};
var myqrcode = new Qrcode(param);
myqrcode.insert_to('qrcode');

SMS: Creates a QrCode that sends an SMS message to a phone number.

var param = {
	type: 'sms',
	value: {
		'number': 21698667534,
		'message': 'Hi!'
	}
};
var myqrcode = new Qrcode(param);
myqrcode.insert_to('qrcode');

MeCard: Creates a MeCard QrCode.

var param = {
	type: 'mecard',
	value: {
		'name': 'Abid Omar',
		'number': 21698667534,
		'email': 'omar.abid2006@gmail.com',
		'address': 'Tunisia',
		'memo': 'Developer'
	}
};
var myqrcode = new Qrcode(param);
myqrcode.insert_to('qrcode');

BizCard: Creates a BizCard QrCode.

var param = {
	type: 'bizcard',
	value: {
		first_name: 'Abid',
		last_name: 'Omar',
		company: 'Csomar',
		job: 'Developer',
		phone: '98667534',
		address: 'somewhere',
		email: 'contact@csomar.com',
		website: 'http://omarabid.com'
	}
};
		var myqrcode = new Qrcode(param);
		myqrcode.insert_to('qrcode');

PayPal: Creates a PayPal Buy Now button. This QrCode is an URL that redirects to a PayPal buy now page. The required settings are your PayPal ID (Email), Item Description, the price (amount), the quantity, the currency and the item code.

var param = {
	type: 'paypal',
	value: {
		email: 'pp@csomar.com',
		description: 'my item',
		amount: 120,
		currency: 'USD',
		quantity: 5,
		item_number: 101
	}
};
var myqrcode = new Qrcode(param);
myqrcode.insert_to('qrcode');

Location: Creates a GeoLocation QrCode. You need the Latitude and Longitude attributes which can be located with Google Maps.

var param = {
	type: 'location',
	value: {
		'latitude': 2.453,
		'longitude': 1.564
	}
};
var myqrcode = new Qrcode(param);
myqrcode.insert_to('qrcode');

Wifi: Creates a QrCode to be read by phones and connect to your Wifi network.

var param = {
	type: 'wifi',
	value: {
		'SSID': 'my_network',
		'network_type': 'WEP',
		'password': 'cafe-wifi'
	}
};
var myqrcode = new Qrcode(param);
myqrcode.insert_to('qrcode');

Bookmark: Creates a QrCode to be read by phones and bookmark your page.

var param = {
	type: 'bookmark',
	value: {
		'title': 'my web page',
		'url': 'http://url.com'
	}
};
var myqrcode = new Qrcode(param);
myqrcode.insert_to('qrcode');