Refactorings. Adds optional label, image and rounded corners.

src/jquery.qrcode.js

@@ -8,7 +8,7 @@
 
 
 		// Wrapper for the original QR code generator.
-	var QRCode = function (version, level, text) {
+	var QRCode = function (text, level, version, quiet) {
 
 			// `qrcode` is the single public function that will be defined by the `QR Code Generator`
 			// at the end of the file.
@@ -16,38 +16,43 @@
 			qr.addData(text);
 			qr.make();
 
-			var moduleCount = qr.getModuleCount(),
+			quiet = quiet || 0;
-				isDark = function (col, row) {
 
-					return qr.isDark(col, row);
+			var qrModuleCount = qr.getModuleCount(),
-				},
+				quietModuleCount = qr.getModuleCount() + 2*quiet,
-				extIsDarkFn = function (width, height, blank) {
+				isDark = function (row, col) {
+
+					row -= quiet;
+					col -= quiet;
 
-					if (!blank) {
+					if (row < 0 || row >= qrModuleCount || col < 0 || col >= qrModuleCount) {
-						return isDark;
+						return false;
 					}
 
-					var moduleCount = qr.getModuleCount(),
+					return qr.isDark(row, col);
-						moduleWidth = width / moduleCount,
+				},
-						moduleHeight = height / moduleCount;
+				addBlank = function (l, t, r, b) {
+
+					var prevIsDark = this.isDark,
+						moduleSize = 1 / quietModuleCount;
 
-					return function (row, col) {
+					this.isDark = function (row, col) {
 
-						var l = col * moduleWidth,
+						var ml = col * moduleSize,
-							t = row * moduleHeight,
+							mt = row * moduleSize,
-							r = l + moduleWidth,
+							mr = ml + moduleSize,
-							b = t + moduleHeight;
+							mb = mt + moduleSize;
 
-						return isDark(row, col) && (blank.l > r || l > blank.r || blank.t > b || t > blank.b);
+						return prevIsDark(row, col) && (l > mr || ml > r || t > mb || mt > b);
 					};
 				};
 
-			this.version = version;
-			this.level = level;
 			this.text = text;
-			this.moduleCount = moduleCount;
+			this.level = level;
+			this.version = version;
+			this.moduleCount = quietModuleCount;
 			this.isDark = isDark;
-			this.extIsDarkFn = extIsDarkFn;
+			this.addBlank = addBlank;
 		},
 
 		// Check if canvas is available in the browser (as Modernizr does)
@@ -57,137 +62,302 @@
 			return !!(elem.getContext && elem.getContext('2d'));
 		}()),
 
+		arcToAvailable = Object.prototype.toString.call(window.opera) !== '[object Opera]',
+
 		// Returns a minimal QR code for the given text starting with version `minVersion`.
 		// Returns `null` if `text` is too long to be encoded in `maxVersion`.
-		createBestQr = function (minVersion, maxVersion, level, text) {
+		createQRCode = function (text, level, minVersion, maxVersion, quiet) {
 
-			minVersion = Math.max(1, minVersion);
+			minVersion = Math.max(1, minVersion || 1);
-			maxVersion = Math.min(40, maxVersion);
+			maxVersion = Math.min(40, maxVersion || 40);
 			for (var version = minVersion; version <= maxVersion; version += 1) {
 				try {
-					return new QRCode(version, level, text);
+					return new QRCode(text, level, version, quiet);
 				} catch (err) {}
 			}
+		},
+
+		drawBackgroundLabel = function (qr, context, settings) {
+
+			var font = "bold " + (settings.labelsize * settings.size) + "px " + settings.fontname,
+				ctx = $('<canvas/>')[0].getContext("2d");
+
+			ctx.font = font;
+
+			var w = ctx.measureText(settings.label).width,
+				sh = settings.labelsize,
+				sw = w / settings.size,
+				sl = (1 - sw)/2,
+				st = (1 - sh)/2,
+				sr = sl + sw,
+				sb = st + sh,
+				pad = 0.01;
+
+			if (settings.boxed) {
+				// Box
+				qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
+			} else {
+				// Strip
+				qr.addBlank(0, st - pad, size, sb + pad);
+			}
 
-			return null;
+			context.fillStyle = settings.fontcolor;
+			context.textAlign = "center";
+			context.font = font;
+			context.fillText($("#label").val(), 0.5 * settings.size, 0.5 * settings.size + 0.3 * settings.labelsize * settings.size);
 		},
 
-		// Draws QR code to the given `canvas` and returns it.
+		drawBackgroundImage = function (qr, context, settings) {
-		drawOnCanvas = function (canvas, settings) {
 
-				// some shortcuts to improve compression
+			var size = settings.size;
-			var settings_left = settings.left,
-				settings_top = settings.top,
-				settings_width = settings.width,
-				settings_height = settings.height,
-				settings_color = settings.color,
-				settings_bgColor = settings.bgColor,
-				settings_blank = settings.blank,
 
-				qr = createBestQr(settings.minVersion, settings.maxVersion, settings.ecLevel, settings.text),
+			var w = settings.image.naturalWidth || 1,
-				$canvas = $(canvas),
+				h = settings.image.naturalHeight || 1,
-				ctx = $canvas[0].getContext('2d');
+				sh = settings.imagesize,
+				sw = sh * w / h,
+				sl = (1 - sw)/2,
+				st = (1 - sh)/2,
+				sr = sl + sw,
+				sb = st + sh,
+				pad = 0.01;
 
-			if (settings_bgColor) {
+			if (settings.boxed) {
-				ctx.fillStyle = settings_bgColor;
+				// Box
-				ctx.fillRect(settings_left, settings_top, settings_width, settings_height);
+				qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
+			} else {
+				// Strip
+				qr.addBlank(0, st - pad, size, sb + pad);
+			}
+			context.drawImage(settings.image, sl*size, st*size, sw*size, sh*size);
+		},
+
+		drawBackground = function (qr, context, settings) {
+
+			if (settings.bgColor) {
+				context.fillStyle = settings.bgColor;
+				context.fillRect(settings.left, settings.top, settings.size, settings.size);
 			}
 
-			if (qr) {
+			if (settings.ext === 'label') {
-				$canvas.data('qrcode', qr);
+				drawBackgroundLabel(qr, context, settings);
-
+			} else if (settings.ext === 'image') {
-				var moduleCount = qr.moduleCount,
+				drawBackgroundImage(qr, context, settings);
-					moduleWidth = settings_width / moduleCount,
+			}
-					moduleHeight = settings_height / moduleCount,
+		},
-					isDarkFn = qr.extIsDarkFn(settings_width, settings_height, settings_blank),
+
-					row, col;
+		drawModuleDefault = function (qr, context, settings, left, top, width, row, col) {
-
+
-				ctx.beginPath();
+			if (qr.isDark(row, col)) {
-				for (row = 0; row < moduleCount; row += 1) {
+				context.rect(left, top, width, width);
-					for (col = 0; col < moduleCount; col += 1) {
+			}
-						if (isDarkFn(row, col)) {
+		},
-							ctx.rect(settings_left + col * moduleWidth, settings_top + row * moduleHeight, moduleWidth, moduleHeight);
+
-						}
+		drawModuleRoundedDark = function (ctx, l, t, r, b, rad, nw, ne, se, sw) {
-					}
+
+			if (nw) {
+				ctx.moveTo(l + rad, t);
+			} else {
+				ctx.moveTo(l, t);
+			}
+
+			if (ne) {
+				ctx.lineTo(r - rad, t);
+				ctx.arcTo(r, t, r, b, rad);
+			} else {
+				ctx.lineTo(r, t);
+			}
+
+			if (se) {
+				ctx.lineTo(r, b - rad);
+				ctx.arcTo(r, b, l, b, rad);
+			} else {
+				ctx.lineTo(r, b);
+			}
+
+			if (sw) {
+				ctx.lineTo(l + rad, b);
+				ctx.arcTo(l, b, l, t, rad);
+			} else {
+				ctx.lineTo(l, b);
+			}
+
+			if (nw) {
+				ctx.lineTo(l, t + rad);
+				ctx.arcTo(l, t, r, t, rad);
+			} else {
+				ctx.lineTo(l, t);
+			}
+		},
+
+		drawModuleRoundendLight = function (ctx, l, t, r, b, rad, nw, ne, se, sw) {
+
+			if (nw) {
+				ctx.moveTo(l + rad, t);
+				ctx.lineTo(l, t);
+				ctx.lineTo(l, t + rad);
+				ctx.arcTo(l, t, l + rad, t, rad);
+			}
+
+			if (ne) {
+				ctx.moveTo(r - rad, t);
+				ctx.lineTo(r, t);
+				ctx.lineTo(r, t + rad);
+				ctx.arcTo(r, t, r - rad, t, rad);
+			}
+
+			if (se) {
+				ctx.moveTo(r - rad, b);
+				ctx.lineTo(r, b);
+				ctx.lineTo(r, b - rad);
+				ctx.arcTo(r, b, r - rad, b, rad);
+			}
+
+			if (sw) {
+				ctx.moveTo(l + rad, b);
+				ctx.lineTo(l, b);
+				ctx.lineTo(l, b - rad);
+				ctx.arcTo(l, b, l + rad, b, rad);
+			}
+		},
+
+		drawModuleRounded = function (qr, context, settings, left, top, width, row, col) {
+
+			var isDark = qr.isDark,
+				right = left + width,
+				bottom = top + width,
+				radius = settings.radius * width,
+				rowT = row - 1,
+				rowB = row + 1,
+				colL = col - 1,
+				colR = col + 1,
+				center = isDark(row, col),
+				northwest = isDark(rowT, colL),
+				north = isDark(rowT, col),
+				northeast = isDark(rowT, colR),
+				east = isDark(row, colR),
+				southeast = isDark(rowB, colR),
+				south = isDark(rowB, col),
+				southwest = isDark(rowB, colL),
+				west = isDark(row, colL);
+
+			if (center) {
+				drawModuleRoundedDark(context, left, top, right, bottom, radius, !north && !west, !north && !east, !south && !east, !south && !west);
+			} else {
+				drawModuleRoundendLight(context, left, top, right, bottom, radius, north && west && northwest, north && east && northeast, south && east && southeast, south && west && southwest);
+			}
+		},
+
+		drawModules = function (qr, context, settings) {
+
+			var moduleCount = qr.moduleCount,
+				moduleSize = settings.size / moduleCount,
+				fn = drawModuleDefault,
+				row, col;
+
+			if (arcToAvailable && settings.radius > 0 && settings.radius <= 0.5) {
+				fn = drawModuleRounded;
+			}
+
+			context.beginPath();
+			for (row = 0; row < moduleCount; row += 1) {
+				for (col = 0; col < moduleCount; col += 1) {
+
+					var l = settings.left + col * moduleSize,
+						t = settings.top + row * moduleSize,
+						w = moduleSize;
+
+					fn(qr, context, settings, l, t, w, row, col);
 				}
-				ctx.fillStyle = settings_color;
+			}
-				ctx.fill();
+			context.fillStyle = settings.color;
+			context.fill();
+		},
+
+		// Draws QR code to the given `canvas` and returns it.
+		drawOnCanvas = function (canvas, settings) {
+
+			var qr = createQRCode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
+			if (!qr) {
+				return null;
 			}
 
+			var $canvas = $(canvas).data('qrcode', qr),
+				context = $canvas[0].getContext('2d');
+
+			drawBackground(qr, context, settings);
+			drawModules(qr, context, settings);
+
 			return $canvas;
 		},
 
 		// Returns a `canvas` element representing the QR code for the given settings.
 		createCanvas = function (settings) {
 
-			var $canvas = $('<canvas/>').attr('width', settings.width).attr('height', settings.height);
+			var $canvas = $('<canvas/>').attr('width', settings.size).attr('height', settings.size);
-
 			return drawOnCanvas($canvas, settings);
 		},
 
 		// Returns an `image` element representing the QR code for the given settings.
 		createImage = function (settings) {
 
-			return $('<img />').attr('src', createCanvas(settings).toDataURL('image/png'));
+			return $('<img/>').attr('src', createCanvas(settings)[0].toDataURL('image/png'));
 		},
 
 		// Returns a `div` element representing the QR code for the given settings.
 		createDiv = function (settings) {
 
+			var qr = createQRCode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
+			if (!qr) {
+				return null;
+			}
+
 				// some shortcuts to improve compression
-			var settings_width = settings.width,
+			var settings_size = settings.size,
-				settings_height = settings.height,
-				settings_color = settings.color,
 				settings_bgColor = settings.bgColor,
 				math_floor = Math.floor,
 
-				qr = createBestQr(settings.minVersion, settings.maxVersion, settings.ecLevel, settings.text),
+				moduleCount = qr.moduleCount,
-				$div = $('<div/>').css({
+				moduleSize = math_floor(settings_size / moduleCount),
-										position: 'relative',
+				offset = math_floor(0.5 * (settings_size - moduleSize * moduleCount)),
-										left: 0,
+
-										top: 0,
+				row, col,
-										padding: 0,
+
-										margin: 0,
+				containerCSS = {
-										width: settings_width,
+					position: 'relative',
-										height: settings_height
+					left: 0,
-									});
+					top: 0,
+					padding: 0,
+					margin: 0,
+					width: settings_size,
+					height: settings_size
+				},
+				darkCSS = {
+					position: 'absolute',
+					padding: 0,
+					margin: 0,
+					width: moduleSize,
+					height: moduleSize,
+					'background-color': settings.color
+				},
+
+				$div = $('<div/>').data('qrcode', qr).css(containerCSS);
 
 			if (settings_bgColor) {
 				$div.css('background-color', settings_bgColor);
 			}
 
-			if (qr) {
+			for (row = 0; row < moduleCount; row += 1) {
-				$div.data('qrcode', qr);
+				for (col = 0; col < moduleCount; col += 1) {
-
+					if (qr.isDark(row, col)) {
-				var moduleCount = qr.moduleCount,
+						$('<div/>')
-					moduleWidth = math_floor(settings_width / moduleCount),
+							.css(darkCSS)
-					moduleHeight = math_floor(settings_height / moduleCount),
+							.css({
-					offsetLeft = math_floor(0.5 * (settings_width - moduleWidth * moduleCount)),
+								left: offset + col * moduleSize,
-					offsetTop = math_floor(0.5 * (settings_height - moduleHeight * moduleCount)),
+								top: offset + row * moduleSize
-					row, col;
+							})
-
+							.appendTo($div);
-				for (row = 0; row < moduleCount; row += 1) {
-					for (col = 0; col < moduleCount; col += 1) {
-						if (qr.isDark(row, col)) {
-							$('<div/>')
-								.css({
-									left: offsetLeft + col * moduleWidth,
-									top: offsetTop + row * moduleHeight
-								})
-								.appendTo($div);
-						}
 					}
 				}
-
-				$div.children()
-							.css({
-								position: 'absolute',
-								padding: 0,
-								margin: 0,
-								width: moduleWidth,
-								height: moduleHeight,
-								'background-color': settings_color
-							});
 			}
 
 			return $div;
@@ -211,23 +381,22 @@
 		// ----------------
 		defaults = {
 
-			// render method: `'canvas'` or `'div'`
+			// render method: `'canvas'`, `'image'` or `'div'`
 			render: 'canvas',
 
-			// version range somewhere in 1..40
+			// version range somewhere in 1 .. 40
-			minVersion: 2,
+			minVersion: 1,
 			maxVersion: 40,
 
 			// error correction level: `'L'`, `'M'`, `'Q'` or `'H'`
 			ecLevel: 'L',
 
-			// left and top in pixel if drawn onto existing canvas
+			// offset in pixel if drawn onto existing canvas
 			left: 0,
 			top: 0,
 
-			// width and height in pixel
+			// size in pixel
-			width: 256,
+			size: 200,
-			height: 256,
 
 			// code color
 			color: '#000',
@@ -235,11 +404,27 @@
 			// background color, `null` for transparent background
 			bgColor: null,
 
-			// the encoded text
+			// content
 			text: 'no text',
 
-			// blank space: {l: 0, t: 0, r: 0, b: 0} in px relative to QR code space
+			// corner radius relative to module width: 0.0 .. 0.5
-			blank: null
+			radius: 0,
+
+			// quiet zone in modules
+			quiet: 0,
+
+			// extras: 'label' or 'image'
+			extra: null,
+
+			label: 'no label',
+			labelsize: 0.1,
+			fontname: 'sans',
+			fontcolor: '#000',
+
+			image: null,
+			imagesize: 0.1,
+
+			boxed: true
 		};
 
 	// Register the plugin