Merge branch 'develop'

README.md

@@ -10,6 +10,17 @@ Uses [QR Code Generator](http://www.d-project.com/qrcode/index.html) (MIT). Kudo
 
 ## Changelog
 
+
+### v0.6.0 - *2013-07-28*
+
+* adds version range
+* adds quiet zone
+* adds optional label or image
+* adds rounded corners
+* adds image output
+* adds demo
+
+
 ### v0.5.0 - *2013-07-23*
 
 * adds option to set error correction level

makefile.js

@@ -34,6 +34,11 @@ var pkg = require('./package.json'),
 		]
 	},
 
+	mapperSrc = function (blob) {
+
+		return blob.source.replace(src, build);
+	},
+
 	mapperRoot = function (blob) {
 
 		return blob.source.replace(root, build);
@@ -104,10 +109,15 @@ module.exports = function (make) {
 
 			var scriptName = pkg.name;
 
+			$(src + '/demo/*')
+				.handlebars(replacements)
+				.write($.OVERWRITE, mapperSrc);
+
 			$(src + ': ' + scriptName + '.js')
 				.includify()
 				.handlebars(replacements)
 				.write($.OVERWRITE, path.join(build, scriptName + '-' + pkg.version + '.js'))
+				.write($.OVERWRITE, path.join(build, 'demo', scriptName + '.js'))
 				.uglifyjs()
 				.write($.OVERWRITE, path.join(build, scriptName + '-' + pkg.version + '.min.js'));
 

package.json

@@ -1,5 +1,5 @@
 {
 	"name": "jquery.qrcode",
 	"displayName": "jQuery.qrcode",
-	"version": "0.5.0"
+	"version": "0.6.0"
 }

src/demo/ff-range.js

@@ -0,0 +1,294 @@
+/*
+html5slider - a JS implementation of <input type=range> for Firefox 16 and up
+https://github.com/fryn/html5slider
+
+Copyright (c) 2010-2013 Frank Yan, <http://frankyan.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+(function() {
+
+// test for native support
+var test = document.createElement('input');
+try {
+  test.type = 'range';
+  if (test.type == 'range')
+    return;
+} catch (e) {
+  return;
+}
+
+// test for required property support
+test.style.background = 'linear-gradient(red, red)';
+if (!test.style.backgroundImage || !('MozAppearance' in test.style))
+  return;
+
+var scale;
+var isMac = navigator.platform == 'MacIntel';
+var thumb = {
+  radius: isMac ? 9 : 6,
+  width: isMac ? 22 : 12,
+  height: isMac ? 16 : 20
+};
+var track = 'linear-gradient(transparent ' + (isMac ?
+  '6px, #999 6px, #999 7px, #ccc 8px, #bbb 9px, #bbb 10px, transparent 10px' :
+  '9px, #999 9px, #bbb 10px, #fff 11px, transparent 11px') +
+  ', transparent)';
+var styles = {
+  'min-width': thumb.width + 'px',
+  'min-height': thumb.height + 'px',
+  'max-height': thumb.height + 'px',
+  padding: '0 0 ' + (isMac ? '2px' : '1px'),
+  border: 0,
+  'border-radius': 0,
+  cursor: 'default',
+  'text-indent': '-999999px' // -moz-user-select: none; breaks mouse capture
+};
+var options = {
+  attributes: true,
+  attributeFilter: ['min', 'max', 'step', 'value']
+};
+var onInput = document.createEvent('HTMLEvents');
+onInput.initEvent('input', true, false);
+var onChange = document.createEvent('HTMLEvents');
+onChange.initEvent('change', true, false);
+
+if (document.readyState == 'loading')
+  document.addEventListener('DOMContentLoaded', initialize, true);
+else
+  initialize();
+addEventListener('pageshow', recreate, true);
+
+function initialize() {
+  // create initial sliders
+  recreate();
+  // create sliders on-the-fly
+  new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      if (mutation.addedNodes)
+        Array.forEach(mutation.addedNodes, function(node) {
+          if (!(node instanceof Element))
+            ;
+          else if (node.childElementCount)
+            Array.forEach(node.querySelectorAll('input[type=range]'), check);
+          else if (node.mozMatchesSelector('input[type=range]'))
+            check(node);
+        });
+    });
+  }).observe(document, { childList: true, subtree: true });
+}
+
+function recreate() {
+  Array.forEach(document.querySelectorAll('input[type=range]'), check);
+}
+
+function check(input) {
+  if (input.type != 'range')
+    transform(input);
+}
+
+function transform(slider) {
+
+  var isValueSet, areAttrsSet, isUI, isClick, prevValue, rawValue, prevX;
+  var min, max, step, range, value = slider.value;
+
+  // lazily create shared slider affordance
+  if (!scale) {
+    scale = document.body.appendChild(document.createElement('hr'));
+    style(scale, {
+      '-moz-appearance': isMac ? 'scale-horizontal' : 'scalethumb-horizontal',
+      display: 'block',
+      visibility: 'visible',
+      opacity: 1,
+      position: 'fixed',
+      top: '-999999px'
+    });
+    document.mozSetImageElement('__sliderthumb__', scale);
+  }
+
+  // reimplement value and type properties
+  var getValue = function() { return '' + value; };
+  var setValue = function setValue(val) {
+    value = '' + val;
+    isValueSet = true;
+    draw();
+    delete slider.value;
+    slider.value = value;
+    slider.__defineGetter__('value', getValue);
+    slider.__defineSetter__('value', setValue);
+  };
+  slider.__defineGetter__('value', getValue);
+  slider.__defineSetter__('value', setValue);
+  Object.defineProperty(slider, 'type', {
+    get: function() { return 'range'; }
+  });
+
+  // sync properties with attributes
+  ['min', 'max', 'step'].forEach(function(name) {
+    if (slider.hasAttribute(name))
+      areAttrsSet = true;
+    Object.defineProperty(slider, name, {
+      get: function() {
+        return this.hasAttribute(name) ? this.getAttribute(name) : '';
+      },
+      set: function(val) {
+        val === null ?
+          this.removeAttribute(name) :
+          this.setAttribute(name, val);
+      }
+    });
+  });
+
+  // initialize slider
+  slider.readOnly = true;
+  style(slider, styles);
+  update();
+
+  new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      if (mutation.attributeName != 'value') {
+        update();
+        areAttrsSet = true;
+      }
+      // note that value attribute only sets initial value
+      else if (!isValueSet) {
+        value = slider.getAttribute('value');
+        draw();
+      }
+    });
+  }).observe(slider, options);
+
+  slider.addEventListener('mousedown', onDragStart, true);
+  slider.addEventListener('keydown', onKeyDown, true);
+  slider.addEventListener('focus', onFocus, true);
+  slider.addEventListener('blur', onBlur, true);
+
+  function onDragStart(e) {
+    isClick = true;
+    setTimeout(function() { isClick = false; }, 0);
+    if (e.button || !range)
+      return;
+    var width = parseFloat(getComputedStyle(this).width);
+    var multiplier = (width - thumb.width) / range;
+    if (!multiplier)
+      return;
+    // distance between click and center of thumb
+    var dev = e.clientX - this.getBoundingClientRect().left - thumb.width / 2 -
+              (value - min) * multiplier;
+    // if click was not on thumb, move thumb to click location
+    if (Math.abs(dev) > thumb.radius) {
+      isUI = true;
+      this.value -= -dev / multiplier;
+    }
+    rawValue = value;
+    prevX = e.clientX;
+    this.addEventListener('mousemove', onDrag, true);
+    this.addEventListener('mouseup', onDragEnd, true);
+  }
+
+  function onDrag(e) {
+    var width = parseFloat(getComputedStyle(this).width);
+    var multiplier = (width - thumb.width) / range;
+    if (!multiplier)
+      return;
+    rawValue += (e.clientX - prevX) / multiplier;
+    prevX = e.clientX;
+    isUI = true;
+    this.value = rawValue;
+  }
+
+  function onDragEnd() {
+    this.removeEventListener('mousemove', onDrag, true);
+    this.removeEventListener('mouseup', onDragEnd, true);
+    slider.dispatchEvent(onInput);
+    slider.dispatchEvent(onChange);
+  }
+
+  function onKeyDown(e) {
+    if (e.keyCode > 36 && e.keyCode < 41) { // 37-40: left, up, right, down
+      onFocus.call(this);
+      isUI = true;
+      this.value = value + (e.keyCode == 38 || e.keyCode == 39 ? step : -step);
+    }
+  }
+
+  function onFocus() {
+    if (!isClick)
+      this.style.boxShadow = !isMac ? '0 0 0 2px #fb0' :
+        'inset 0 0 20px rgba(0,127,255,.1), 0 0 1px rgba(0,127,255,.4)';
+  }
+
+  function onBlur() {
+    this.style.boxShadow = '';
+  }
+
+  // determines whether value is valid number in attribute form
+  function isAttrNum(value) {
+    return !isNaN(value) && +value == parseFloat(value);
+  }
+
+  // validates min, max, and step attributes and redraws
+  function update() {
+    min = isAttrNum(slider.min) ? +slider.min : 0;
+    max = isAttrNum(slider.max) ? +slider.max : 100;
+    if (max < min)
+      max = min > 100 ? min : 100;
+    step = isAttrNum(slider.step) && slider.step > 0 ? +slider.step : 1;
+    range = max - min;
+    draw(true);
+  }
+
+  // recalculates value property
+  function calc() {
+    if (!isValueSet && !areAttrsSet)
+      value = slider.getAttribute('value');
+    if (!isAttrNum(value))
+      value = (min + max) / 2;;
+    // snap to step intervals (WebKit sometimes does not - bug?)
+    value = Math.round((value - min) / step) * step + min;
+    if (value < min)
+      value = min;
+    else if (value > max)
+      value = min + ~~(range / step) * step;
+  }
+
+  // renders slider using CSS background ;)
+  function draw(attrsModified) {
+    calc();
+    var wasUI = isUI;
+    isUI = false;
+    if (wasUI && value != prevValue)
+      slider.dispatchEvent(onInput);
+    if (!attrsModified && value == prevValue)
+      return;
+    prevValue = value;
+    var position = range ? (value - min) / range * 100 : 0;
+    var bg = '-moz-element(#__sliderthumb__) ' + position + '% no-repeat, ';
+    style(slider, { background: bg + track });
+  }
+
+}
+
+function style(element, styles) {
+  for (var prop in styles)
+    element.style.setProperty(prop, styles[prop], 'important');
+}
+
+})();

src/demo/index.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+
+<html class="no-js no-browser" lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<title>{{pkg.displayName}} {{pkg.version}} · Demo</title>
+	<meta name="description" content="demo for the jQuery plug in jQuery.qrcode (http://larsjung.de/qrcode/)">
+	<meta name="author" content="Lars Jung">
+	<meta name="viewport" content="width=device-width">
+	<link rel="author" href="http://plus.google.com/106403733398479106535">
+	<link rel="shortcut icon" href="icon-16.ico">
+	<link rel="apple-touch-icon" href="icon-48.png" type="image/png">
+	<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet'>
+	<link href='styles.css' rel='stylesheet'>
+	<script src="jquery-1.10.2.js"></script>
+	<script src="jquery.qrcode.js"></script>
+	<script src="ff-range.js"></script>
+	<script src="scripts.js"></script>
+</head>
+
+<body>
+	<div id="container"></div>
+
+	<div class="control left">
+		<a id="banner" href="http://larsjung.de/qrcode/">{{pkg.displayName}} {{pkg.version}}</a>
+		<hr/>
+		<label for="render">RENDER MODE</label>
+		<select id="render">
+			<option value="canvas" selected="selected">Canvas</option>
+			<option value="image">Image</option>
+			<option value="div">DIV</option>
+		</select>
+		<hr/>
+		<label for="size">SIZE:</label>
+		<input id="size" type="range" value="400" min="100" max="1000" step="50" />
+		<label for="color">COLOR</label>
+		<input id="color" type="color" value="#333333" />
+		<label for="bg-color">BACKGROUND COLOR</label>
+		<input id="bg-color" type="color" value="#ffffff" />
+		<label for="text">CONTENT</label>
+		<textarea id="text">http://larsjung.de/qrcode/</textarea>
+		<hr/>
+		<label for="minversion">MINVERSION:</label>
+		<input id="minversion" type="range" value="6" min="1" max="10" step="1" />
+		<label for="eclevel">ERROR CORRECTION LEVEL</label>
+		<select id="eclevel">
+			<option value="L">L - Low (7%)</option>
+			<option value="M">M - Medium (15%)</option>
+			<option value="Q">Q - Quartile (25%)</option>
+			<option value="H" selected="selected">H - High (30%)</option>
+		</select>
+		<label for="quiet">QUIET ZONE:</label>
+		<input id="quiet" type="range" value="1" min="0" max="4" step="1" />
+		<label for="radius">CORNER RADIUS (not in Opera):</label>
+		<input id="radius" type="range" value="50" min="0" max="50" step="10" />
+		<!-- <hr/> -->
+		<!-- <a id="download" download="qrcode.png">DOWNLOAD</a> -->
+	</div>
+
+	<div class="control right">
+		<label for="mode">MODE</label>
+		<select id="mode">
+			<option value="0">0 - Normal</option>
+			<option value="1">1 - Label-Strip</option>
+			<option value="2" selected="selected">2 - Label-Box</option>
+			<option value="3">3 - Image-Strip</option>
+			<option value="4">4 - Image-Box</option>
+		</select>
+		<hr/>
+		<label for="label">LABEL</label>
+		<input id="label" type="text" value="jQuery.qrcode" />
+		<label for="fontsize">LABEL SIZE:</label>
+		<input id="fontsize" type="range" value="11" min="1" max="20" step="1" />
+		<label for="font">FONT NAME</label>
+		<input id="font" type="text" value="Ubuntu" />
+		<label for="fontcolor">FONT COLOR:</label>
+		<input id="fontcolor" type="color" value="#ff9818" />
+		<hr/>
+		<label for="image">IMAGE</label>
+		<input id="image" type="file" />
+		<label for="imagesize">IMAGE SIZE:</label>
+		<input id="imagesize" type="range" value="13" min="1" max="30" step="1" />
+	</div>
+
+	<img id="img-buffer" src="dummy.png" />
+</body>
+
+</html>

src/demo/scripts.js

@@ -0,0 +1,93 @@
+
+var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
+
+	guiValuePairs = [
+		["size", "px"],
+		["minversion", ""],
+		["quiet", "modules"],
+		["radius", "%"],
+		["fontsize", "%"],
+		["imagesize", "%"]
+	],
+
+	updateGui = function () {
+
+		for (var idx in guiValuePairs) {
+
+			var pair = guiValuePairs[idx],
+				$label = $('label[for="' + pair[0] + '"]');
+
+			$label.text($label.text().replace(/:.*/, ': ' + $('#' + pair[0]).val() + pair[1]));
+		}
+	},
+
+	updateQrCode = function () {
+
+		var options = {
+				render: $("#render").val(),
+				ecLevel: $("#eclevel").val(),
+				minVersion: parseInt($("#minversion").val(), 10),
+				color: $("#color").val(),
+				bgColor: $("#bg-color").val(),
+				text: $("#text").val(),
+				size: parseInt($("#size").val(), 10),
+				radius: parseInt($("#radius").val(), 10) * 0.01,
+				quiet: parseInt($("#quiet").val(), 10),
+
+				mode: parseInt($("#mode").val(), 10),
+
+				label: $("#label").val(),
+				labelsize: parseInt($("#fontsize").val(), 10) * 0.01,
+				fontname: $("#font").val(),
+				fontcolor: $("#fontcolor").val(),
+
+				image: $("#img-buffer")[0],
+				imagesize: parseInt($("#imagesize").val(), 10) * 0.01
+			};
+
+		$("#container").empty().qrcode(options);
+	},
+
+	update = function () {
+
+		updateGui();
+		updateQrCode();
+	},
+
+	onImageInput = function () {
+
+		var input = $("#image")[0];
+
+		if (input.files && input.files[0]) {
+
+			var reader = new FileReader();
+
+			reader.onload = function (event) {
+				$("#img-buffer").attr("src", event.target.result);
+				$("#mode").val("4");
+				setTimeout(update, 250);
+			};
+			reader.readAsDataURL(input.files[0]);
+		}
+	},
+
+	download = function (event) {
+
+		var data = $("#container canvas")[0].toDataURL('image/png');
+		$("#download").attr("href", data);
+	};
+
+
+$(function () {
+
+	if (isOpera) {
+		$('html').addClass('opera');
+		$('#radius').prop('disabled', true);
+	}
+
+	$("#download").on("click", download);
+	$("#image").on('change', onImageInput);
+	$("input, textarea, select").on("input change", update);
+	$(window).load(update);
+	update();
+});

src/demo/styles.css

@@ -0,0 +1,115 @@
+
+body {
+	font-family: Ubuntu;
+	margin: 0;
+	padding: 0;
+	text-align: center;
+	background: repeat url("back.png");
+}
+
+#banner {
+	display: block;
+	text-decoration: none;
+	color: rgb(29, 119, 194);
+	padding: 12px 0 0;
+	text-align: center;
+}
+
+#banner:hover {
+	color: #333;
+}
+
+#container {
+	display: inline-block;
+	margin: 20px auto;
+	box-shadow: 0 0 16px rgba(0,0,0,0.5);
+}
+
+#container > * {
+	display: block;
+}
+
+.control {
+	position: absolute;
+	background-color: #f8f8f8;
+	top: 0;
+	width: 190px;
+	box-shadow: 0 0 32px rgba(0,0,0,0.5);
+	overflow: hidden;
+	text-align: left;
+}
+
+.control.left {
+	left: 0;
+}
+
+.control.right {
+	right: 0;
+}
+
+hr {
+	margin: 12px 0 0;
+	padding: 0;
+	border: none;
+	height: 1px;
+	background-color: rgba(0,0,0,0.1);
+}
+
+label {
+	font-size: 10px;
+	color: #bbb;
+	padding: 12px 4px 0 4px;
+}
+
+html.opera label[for="radius"] {
+	color: #e55;
+}
+
+#download {
+	text-align: center;
+	font-weight: bold;
+	text-decoration: none;
+	display: block;
+	color: #555;
+	background-color: #ddd;
+	margin: 4px;
+	padding: 8px 0;
+	border: 1px solid #ddd;
+	cursor: pointer;
+}
+
+input, textarea, select {
+	font-family: Ubuntu;
+	display: block;
+	background-color: #fff;
+	margin: 2px;
+	padding: 0 2px;
+	border: 1px solid #ddd;
+	width: 180px;
+	height: 22px;
+}
+
+#text {
+	height: 48px;
+}
+
+#img-buffer {
+	display: none;
+}
+
+
+
+input[type="range"] {
+	-webkit-appearance: none;
+/*	height: 8px;
+	margin-top: 4px;
+	margin-bottom: 4px;
+*/	cursor: pointer;
+}
+input::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	width: 16px;
+	height: 16px;
+	border-radius: 3px;
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(1, #aaa) );
+}

src/jquery.qrcode.js

@@ -6,77 +6,287 @@
 (function ($) {
 	'use strict';
 
+
+		// Wrapper for the original QR code generator.
+	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.
+			var qr = qrcode(version, level);
+			qr.addData(text);
+			qr.make();
+
+			quiet = quiet || 0;
+
+			var qrModuleCount = qr.getModuleCount(),
+				quietModuleCount = qr.getModuleCount() + 2*quiet,
+				isDark = function (row, col) {
+
+					row -= quiet;
+					col -= quiet;
+
+					if (row < 0 || row >= qrModuleCount || col < 0 || col >= qrModuleCount) {
+						return false;
+					}
+
+					return qr.isDark(row, col);
+				},
+				addBlank = function (l, t, r, b) {
+
+					var prevIsDark = this.isDark,
+						moduleSize = 1 / quietModuleCount;
+
+					this.isDark = function (row, col) {
+
+						var ml = col * moduleSize,
+							mt = row * moduleSize,
+							mr = ml + moduleSize,
+							mb = mt + moduleSize;
+
+						return prevIsDark(row, col) && (l > mr || ml > r || t > mb || mt > b);
+					};
+				};
+
+			this.text = text;
+			this.level = level;
+			this.version = version;
+			this.moduleCount = quietModuleCount;
+			this.isDark = isDark;
+			this.addBlank = addBlank;
+		},
+
 		// Check if canvas is available in the browser (as Modernizr does)
-	var canvasAvailable = (function () {
+		canvasAvailable = (function () {
 
 			var elem = document.createElement('canvas');
 			return !!(elem.getContext && elem.getContext('2d'));
 		}()),
 
-		// Wrapper for the original QR code generator.
+		arcToAvailable = Object.prototype.toString.call(window.opera) !== '[object Opera]',
-		createQr = function (typeNumber, correctionLevel, text) {
 
-			// `qrcode` is the single public function that will be defined by the `QR Code Generator`
+		// Returns a minimal QR code for the given text starting with version `minVersion`.
-			// at the end of the file.
+		// Returns `null` if `text` is too long to be encoded in `maxVersion`.
-			var qr = qrcode(typeNumber, correctionLevel);
+		createQRCode = function (text, level, minVersion, maxVersion, quiet) {
-			qr.addData(text);
-			qr.make();
 
-			return qr;
+			minVersion = Math.max(1, minVersion || 1);
-		},
+			maxVersion = Math.min(40, maxVersion || 40);
-
+			for (var version = minVersion; version <= maxVersion; version += 1) {
-		// Returns a minimal QR code for the given text. Returns `null` if `text`
-		// is to long to be encoded. At the moment it should work with up to ~2900 characters.
-		createBestQr = function (text, correctionLevel) {
-
-			for (var type = 2; type <= 40; type += 1) {
 				try {
-					return createQr(type, correctionLevel, text);
+					return new QRCode(text, level, version, quiet);
 				} catch (err) {}
 			}
+		},
 
-			return null;
+		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.mode === 1) {
+				// Strip
+				qr.addBlank(0, st - pad, size, sb + pad);
+			} else {
+				// Box
+				qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
+			}
+
+			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);
+		},
+
+		drawBackgroundImage = function (qr, context, settings) {
+
+			var size = settings.size,
+				w = settings.image.naturalWidth || 1,
+				h = settings.image.naturalHeight || 1,
+				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.mode === 3) {
+				// Strip
+				qr.addBlank(0, st - pad, size, sb + pad);
+			} else {
+				// Box
+				qr.addBlank(sl - pad, st - pad, sr + pad, 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);
+			}
+
+			var mode = settings.mode;
+			if (mode === 1 || mode === 2) {
+				drawBackgroundLabel(qr, context, settings);
+			} else if (mode === 3 || mode === 4) {
+				drawBackgroundImage(qr, context, settings);
+			}
+		},
+
+		drawModuleDefault = function (qr, context, settings, left, top, width, row, col) {
+
+			if (qr.isDark(row, col)) {
+				context.rect(left, top, width, width);
+			}
+		},
+
+		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);
+				}
+			}
+			context.fillStyle = settings.color;
+			context.fill();
 		},
 
 		// Draws QR code to the given `canvas` and returns it.
 		drawOnCanvas = function (canvas, settings) {
 
-				// some shortcuts to improve compression
+			var qr = createQRCode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
-			var settings_text = settings.text,
+			if (!qr) {
-				settings_ecl = settings.ecl,
+				return null;
-				settings_left = settings.left,
-				settings_top = settings.top,
-				settings_width = settings.width,
-				settings_height = settings.height,
-				settings_color = settings.color,
-				settings_bgColor = settings.bgColor,
-
-				qr = createBestQr(settings_text, settings_ecl),
-				$canvas = $(canvas),
-				ctx = $canvas[0].getContext('2d');
-
-			if (settings_bgColor) {
-				ctx.fillStyle = settings_bgColor;
-				ctx.fillRect(settings_left, settings_top, settings_width, settings_height);
 			}
 
-			if (qr) {
+			var $canvas = $(canvas).data('qrcode', qr),
-				var moduleCount = qr.getModuleCount(),
+				context = $canvas[0].getContext('2d');
-					moduleWidth = settings_width / moduleCount,
-					moduleHeight = settings_height / moduleCount,
-					row, col;
 
-				ctx.beginPath();
+			drawBackground(qr, context, settings);
-				for (row = 0; row < moduleCount; row += 1) {
+			drawModules(qr, context, settings);
-					for (col = 0; col < moduleCount; col += 1) {
-						if (qr.isDark(row, col)) {
-							ctx.rect(settings_left + col * moduleWidth, settings_top + row * moduleHeight, moduleWidth, moduleHeight);
-						}
-					}
-				}
-				ctx.fillStyle = settings_color;
-				ctx.fill();
-			}
 
 			return $canvas;
 		},
@@ -84,68 +294,71 @@
 		// 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)[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_text = settings.text,
+			var settings_size = settings.size,
-				settings_ecl = settings.ecl,
-				settings_width = settings.width,
-				settings_height = settings.height,
-				settings_color = settings.color,
 				settings_bgColor = settings.bgColor,
 				math_floor = Math.floor,
 
-				qr = createBestQr(settings_text, settings_ecl),
+				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) {
-				var moduleCount = qr.getModuleCount(),
+				for (col = 0; col < moduleCount; col += 1) {
-					moduleWidth = math_floor(settings_width / moduleCount),
+					if (qr.isDark(row, col)) {
-					moduleHeight = math_floor(settings_height / moduleCount),
+						$('<div/>')
-					offsetLeft = math_floor(0.5 * (settings_width - moduleWidth * moduleCount)),
+							.css(darkCSS)
-					offsetTop = math_floor(0.5 * (settings_height - moduleHeight * moduleCount)),
+							.css({
-					row, col;
+								left: offset + col * moduleSize,
-
+								top: offset + row * moduleSize
-				for (row = 0; row < moduleCount; row += 1) {
+							})
-					for (col = 0; col < moduleCount; col += 1) {
+							.appendTo($div);
-						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;
@@ -153,7 +366,13 @@
 
 		createHTML = function (settings) {
 
-			return canvasAvailable && settings.render === 'canvas' ? createCanvas(settings) : createDiv(settings);
+			if (canvasAvailable && settings.render === 'canvas') {
+				return createCanvas(settings);
+			} else if (canvasAvailable && settings.render === 'image') {
+				return createImage(settings);
+			}
+
+			return createDiv(settings);
 		},
 
 		// Plugin
@@ -163,19 +382,22 @@
 		// ----------------
 		defaults = {
 
-			// render method: `'canvas'` or `'div'`
+			// render method: `'canvas'`, `'image'` or `'div'`
 			render: 'canvas',
 
-			// error correction level: `'L'`, `'M'`, `'Q'` or `'H'`
+			// version range somewhere in 1 .. 40
-			ecl: 'L',
+			minVersion: 1,
+			maxVersion: 40,
 
-			// left and top in pixel if drawn onto existing canvas
+			// error correction level: `'L'`, `'M'`, `'Q'` or `'H'`
+			ecLevel: 'L',
+
+			// 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',
@@ -183,8 +405,30 @@
 			// background color, `null` for transparent background
 			bgColor: null,
 
-			// the encoded text
+			// content
-			text: 'no text'
+			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,
+
+			label: 'no label',
+			labelsize: 0.1,
+			fontname: 'sans',
+			fontcolor: '#000',
+
+			image: null,
+			imagesize: 0.1
 		};
 
 	// Register the plugin