Update jQuery.qrcode.

This commit is contained in:
Lars Jung 2014-08-04 01:37:31 +02:00
parent 80d0952d1f
commit b7c180355f
2 changed files with 474 additions and 206 deletions

View file

@ -8,6 +8,7 @@
* outsources themes to [h5ai-themes](https://github.com/lrsjng/h5ai-themes) * outsources themes to [h5ai-themes](https://github.com/lrsjng/h5ai-themes)
* replaces `markdown` with [`marked`](https://github.com/chjj/marked) * replaces `markdown` with [`marked`](https://github.com/chjj/marked)
* updates `modulejs` to 0.4.5 * updates `modulejs` to 0.4.5
* updates `jQuery.qrcode` to 0.8.0
## v0.25.2 - *2014-07-01* ## v0.25.2 - *2014-07-01*

View file

@ -1,207 +1,474 @@
/*! jQuery.qrcode 0.4 - //larsjung.de/qrcode - MIT License */ /*! jQuery.qrcode 0.8.0 - //larsjung.de/qrcode - MIT License */
// Uses [QR Code Generator](http://www.d-project.com/qrcode/index.html) (MIT), appended to the end of this file. // Uses [QR Code Generator](http://www.d-project.com/qrcode/index.html) (MIT), appended to the end of this file.
// Kudos to [jquery.qrcode.js](http://github.com/jeromeetienne/jquery-qrcode) (MIT). // Kudos to [jquery.qrcode.js](http://github.com/jeromeetienne/jquery-qrcode) (MIT).
(function ($) { (function ($) {
'use strict'; 'use strict';
// Check if canvas is available in the browser (as Modernizr does)
var canvasAvailable = (function () { // Wrapper for the original QR code generator.
var QRCode = function (text, level, version, quiet) {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d')); // `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);
// Wrapper for the original QR code generator. qr.addData(text);
createQr = function (typeNumber, correctLevel, text) { qr.make();
// `qrcode` is the single public function that will be defined by the `QR Code Generator` quiet = quiet || 0;
// at the end of the file.
var qr = qrcode(typeNumber, correctLevel); var qrModuleCount = qr.getModuleCount(),
qr.addData(text); quietModuleCount = qr.getModuleCount() + 2*quiet,
qr.make(); isDark = function (row, col) {
return qr; row -= quiet;
}, col -= quiet;
// Returns a minimal QR code for the given text. Returns `null` if `text` if (row < 0 || row >= qrModuleCount || col < 0 || col >= qrModuleCount) {
// is to long to be encoded. At the moment it should work with up to 271 characters. return false;
createBestQr = function (text) { }
for (var type = 2; type <= 40; type += 1) { return qr.isDark(row, col);
try { },
return createQr(type, 'L', text); addBlank = function (l, t, r, b) {
} catch (err) {}
} var prevIsDark = this.isDark,
moduleSize = 1 / quietModuleCount;
return null;
}, this.isDark = function (row, col) {
// Draws QR code to the given `canvas` and returns it. var ml = col * moduleSize,
drawOnCanvas = function (canvas, settings) { mt = row * moduleSize,
mr = ml + moduleSize,
// some shortcuts to improve compression mb = mt + moduleSize;
var settings_text = settings.text,
settings_left = settings.left, return prevIsDark(row, col) && (l > mr || ml > r || t > mb || mt > b);
settings_top = settings.top, };
settings_width = settings.width, };
settings_height = settings.height,
settings_color = settings.color, this.text = text;
settings_bgColor = settings.bgColor, this.level = level;
this.version = version;
qr = createBestQr(settings_text), this.moduleCount = quietModuleCount;
$canvas = $(canvas), this.isDark = isDark;
ctx = $canvas[0].getContext('2d'); this.addBlank = addBlank;
},
if (settings_bgColor) {
ctx.fillStyle = settings_bgColor; // Check if canvas is available in the browser (as Modernizr does)
ctx.fillRect(settings_left, settings_top, settings_width, settings_height); canvasAvailable = (function () {
}
var elem = document.createElement('canvas');
if (qr) { return !!(elem.getContext && elem.getContext('2d'));
var moduleCount = qr.getModuleCount(), }()),
moduleWidth = settings_width / moduleCount,
moduleHeight = settings_height / moduleCount, arcToAvailable = Object.prototype.toString.call(window.opera) !== '[object Opera]',
row, col;
// Returns a minimal QR code for the given text starting with version `minVersion`.
ctx.beginPath(); // Returns `null` if `text` is too long to be encoded in `maxVersion`.
for (row = 0; row < moduleCount; row += 1) { createQRCode = function (text, level, minVersion, maxVersion, quiet) {
for (col = 0; col < moduleCount; col += 1) {
if (qr.isDark(row, col)) { minVersion = Math.max(1, minVersion || 1);
ctx.rect(settings_left + col * moduleWidth, settings_top + row * moduleHeight, moduleWidth, moduleHeight); maxVersion = Math.min(40, maxVersion || 40);
} for (var version = minVersion; version <= maxVersion; version += 1) {
} try {
} return new QRCode(text, level, version, quiet);
ctx.fillStyle = settings_color; } catch (err) {}
ctx.fill(); }
} },
return $canvas; drawBackgroundLabel = function (qr, context, settings) {
},
var size = settings.size,
// Returns a `canvas` element representing the QR code for the given settings. font = "bold " + (settings.mSize * size) + "px " + settings.fontname,
createCanvas = function (settings) { ctx = $('<canvas/>')[0].getContext("2d");
var $canvas = $('<canvas/>').attr('width', settings.width).attr('height', settings.height); ctx.font = font;
return drawOnCanvas($canvas, settings); var w = ctx.measureText(settings.label).width,
}, sh = settings.mSize,
sw = w / size,
// Returns a `div` element representing the QR code for the given settings. sl = (1 - sw) * settings.mPosX,
createDiv = function (settings) { st = (1 - sh) * settings.mPosY,
sr = sl + sw,
// some shortcuts to improve compression sb = st + sh,
var settings_text = settings.text, pad = 0.01;
settings_width = settings.width,
settings_height = settings.height, if (settings.mode === 1) {
settings_color = settings.color, // Strip
settings_bgColor = settings.bgColor, qr.addBlank(0, st - pad, size, sb + pad);
math_floor = Math.floor, } else {
// Box
qr = createBestQr(settings_text), qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
$div = $('<div/>').css({ }
position: 'relative',
left: 0, context.fillStyle = settings.fontcolor;
top: 0, context.font = font;
padding: 0, context.fillText(settings.label, sl*size, st*size + 0.75 * settings.mSize * size);
margin: 0, },
width: settings_width,
height: settings_height drawBackgroundImage = function (qr, context, settings) {
});
var size = settings.size,
if (settings_bgColor) { w = settings.image.naturalWidth || 1,
$div.css('background-color', settings_bgColor); h = settings.image.naturalHeight || 1,
} sh = settings.mSize,
sw = sh * w / h,
if (qr) { sl = (1 - sw) * settings.mPosX,
var moduleCount = qr.getModuleCount(), st = (1 - sh) * settings.mPosY,
moduleWidth = math_floor(settings_width / moduleCount), sr = sl + sw,
moduleHeight = math_floor(settings_height / moduleCount), sb = st + sh,
offsetLeft = math_floor(0.5 * (settings_width - moduleWidth * moduleCount)), pad = 0.01;
offsetTop = math_floor(0.5 * (settings_height - moduleHeight * moduleCount)),
row, col; if (settings.mode === 3) {
// Strip
for (row = 0; row < moduleCount; row += 1) { qr.addBlank(0, st - pad, size, sb + pad);
for (col = 0; col < moduleCount; col += 1) { } else {
if (qr.isDark(row, col)) { // Box
$('<div/>') qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
.css({ }
left: offsetLeft + col * moduleWidth,
top: offsetTop + row * moduleHeight context.drawImage(settings.image, sl*size, st*size, sw*size, sh*size);
}) },
.appendTo($div);
} drawBackground = function (qr, context, settings) {
}
} if ($(settings.background).is('img')) {
context.drawImage(settings.background, 0, 0, settings.size, settings.size);
$div.children() } else if (settings.background) {
.css({ context.fillStyle = settings.background;
position: 'absolute', context.fillRect(settings.left, settings.top, settings.size, settings.size);
padding: 0, }
margin: 0,
width: moduleWidth, var mode = settings.mode;
height: moduleHeight, if (mode === 1 || mode === 2) {
'background-color': settings_color drawBackgroundLabel(qr, context, settings);
}); } else if (mode === 3 || mode === 4) {
} drawBackgroundImage(qr, context, settings);
}
return $div; },
},
drawModuleDefault = function (qr, context, settings, left, top, width, row, col) {
createHTML = function (settings) {
if (qr.isDark(row, col)) {
return canvasAvailable && settings.render === 'canvas' ? createCanvas(settings) : createDiv(settings); context.rect(left, top, width, width);
}, }
},
// Plugin
// ====== drawModuleRoundedDark = function (ctx, l, t, r, b, rad, nw, ne, se, sw) {
// Default settings if (nw) {
// ---------------- ctx.moveTo(l + rad, t);
defaults = { } else {
ctx.moveTo(l, t);
// render method: `'canvas'` or `'div'` }
render: 'canvas',
if (ne) {
// left and top in pixel if drawn onto existing canvas ctx.lineTo(r - rad, t);
left: 0, ctx.arcTo(r, t, r, b, rad);
top: 0, } else {
ctx.lineTo(r, t);
// width and height in pixel }
width: 256,
height: 256, if (se) {
ctx.lineTo(r, b - rad);
// code color ctx.arcTo(r, b, l, b, rad);
color: '#000', } else {
ctx.lineTo(r, b);
// background color, `null` for transparent background }
bgColor: null,
if (sw) {
// the encoded text ctx.lineTo(l + rad, b);
text: 'no text' ctx.arcTo(l, b, l, t, rad);
}; } else {
ctx.lineTo(l, b);
// Register the plugin }
// -------------------
$.fn.qrcode = function(options) { if (nw) {
ctx.lineTo(l, t + rad);
var settings = $.extend({}, defaults, options); ctx.arcTo(l, t, r, t, rad);
} else {
return this.each(function () { ctx.lineTo(l, t);
}
if (this.nodeName.toLowerCase() === 'canvas') { },
drawOnCanvas(this, settings);
} else { drawModuleRoundendLight = function (ctx, l, t, r, b, rad, nw, ne, se, sw) {
$(this).append(createHTML(settings));
} if (nw) {
}); ctx.moveTo(l + rad, t);
}; ctx.lineTo(l, t);
ctx.lineTo(l, t + rad);
// jQuery.qrcode plug in code ends here ctx.arcTo(l, t, l + rad, t, rad);
}
// QR Code Generator
// ================= 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);
}
}
if ($(settings.fill).is('img')) {
context.strokeStyle = 'rgba(0,0,0,0.5)';
context.lineWidth = 2;
context.stroke();
var prev = context.globalCompositeOperation;
context.globalCompositeOperation = "destination-out";
context.fill();
context.globalCompositeOperation = prev;
context.clip();
context.drawImage(settings.fill, 0, 0, settings.size, settings.size);
context.restore();
} else {
context.fillStyle = settings.fill;
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.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_size = settings.size,
settings_bgColor = settings.background,
math_floor = Math.floor,
moduleCount = qr.moduleCount,
moduleSize = math_floor(settings_size / moduleCount),
offset = math_floor(0.5 * (settings_size - moduleSize * moduleCount)),
row, col,
containerCSS = {
position: 'relative',
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.fill
},
$div = $('<div/>').data('qrcode', qr).css(containerCSS);
if (settings_bgColor) {
$div.css('background-color', settings_bgColor);
}
for (row = 0; row < moduleCount; row += 1) {
for (col = 0; col < moduleCount; col += 1) {
if (qr.isDark(row, col)) {
$('<div/>')
.css(darkCSS)
.css({
left: offset + col * moduleSize,
top: offset + row * moduleSize
})
.appendTo($div);
}
}
}
return $div;
},
createHTML = function (settings) {
if (canvasAvailable && settings.render === 'canvas') {
return createCanvas(settings);
} else if (canvasAvailable && settings.render === 'image') {
return createImage(settings);
}
return createDiv(settings);
},
// Plugin
// ======
// Default settings
// ----------------
defaults = {
// render method: `'canvas'`, `'image'` or `'div'`
render: 'canvas',
// version range somewhere in 1 .. 40
minVersion: 1,
maxVersion: 40,
// error correction level: `'L'`, `'M'`, `'Q'` or `'H'`
ecLevel: 'L',
// offset in pixel if drawn onto existing canvas
left: 0,
top: 0,
// size in pixel
size: 200,
// code color or image element
fill: '#000',
// background color or image element, `null` for transparent background
background: null,
// content
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,
mSize: 0.1,
mPosX: 0.5,
mPosY: 0.5,
label: 'no label',
fontname: 'sans',
fontcolor: '#000',
image: null
};
// Register the plugin
// -------------------
$.fn.qrcode = function(options) {
var settings = $.extend({}, defaults, options);
return this.each(function () {
if (this.nodeName.toLowerCase() === 'canvas') {
drawOnCanvas(this, settings);
} else {
$(this).append(createHTML(settings));
}
});
};
// jQuery.qrcode plug in code ends here
// QR Code Generator
// =================
//--------------------------------------------------------------------- //---------------------------------------------------------------------
// //
// QR Code Generator for JavaScript // QR Code Generator for JavaScript
@ -1618,5 +1885,5 @@
// returns qrcode function. // returns qrcode function.
return qrcode; return qrcode;
}(); }();
}(jQuery)); }(jQuery));