|
|
|
|
@ -1,4 +1,4 @@
|
|
|
|
|
/*! jQuery.qrcode %BUILD_VERSION% - //larsjung.de/qrcode - MIT License */
|
|
|
|
|
/*! {{pkg.displayName}} {{pkg.version}} - //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.
|
|
|
|
|
// Kudos to [jquery.qrcode.js](http://github.com/jeromeetienne/jquery-qrcode) (MIT).
|
|
|
|
|
@ -6,10 +6,17 @@
|
|
|
|
|
(function ($) {
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
|
|
// Check if canvas is available in the browser (as Modernizr does)
|
|
|
|
|
var canvasAvailable = (function () {
|
|
|
|
|
|
|
|
|
|
var elem = document.createElement('canvas');
|
|
|
|
|
return !!(elem.getContext && elem.getContext('2d'));
|
|
|
|
|
}()),
|
|
|
|
|
|
|
|
|
|
// Wrapper for the original QR code generator.
|
|
|
|
|
var createQr = function (typeNumber, correctLevel, text) {
|
|
|
|
|
createQr = function (typeNumber, correctLevel, text) {
|
|
|
|
|
|
|
|
|
|
// qrcode is the single public function that will be defined by the `QR Code Generator`
|
|
|
|
|
// `qrcode` is the single public function that will be defined by the `QR Code Generator`
|
|
|
|
|
// at the end of the file.
|
|
|
|
|
var qr = qrcode(typeNumber, correctLevel);
|
|
|
|
|
qr.addData(text);
|
|
|
|
|
@ -31,63 +38,88 @@
|
|
|
|
|
return null;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// Returns a `canvas` element representing the QR code for the given settings.
|
|
|
|
|
createCanvas = function (settings) {
|
|
|
|
|
// Draws QR code to the given `canvas` and returns it.
|
|
|
|
|
drawOnCanvas = function (canvas, settings) {
|
|
|
|
|
|
|
|
|
|
// some shortcuts to improve compression
|
|
|
|
|
var settings_text = settings.text,
|
|
|
|
|
settings_left = settings.left,
|
|
|
|
|
settings_top = settings.top,
|
|
|
|
|
settings_width = settings.width,
|
|
|
|
|
settings_height = settings.height,
|
|
|
|
|
settings_color = settings.color,
|
|
|
|
|
settings_bgColor = settings.bgColor,
|
|
|
|
|
|
|
|
|
|
var qr = createBestQr(settings.text),
|
|
|
|
|
$canvas = $('<canvas/>').attr('width', settings.width).attr('height', settings.height),
|
|
|
|
|
qr = createBestQr(settings_text),
|
|
|
|
|
$canvas = $(canvas),
|
|
|
|
|
ctx = $canvas[0].getContext('2d');
|
|
|
|
|
|
|
|
|
|
if (settings.bgColor) {
|
|
|
|
|
ctx.fillStyle = settings.bgColor;
|
|
|
|
|
ctx.fillRect(0, 0, settings.width, settings.height);
|
|
|
|
|
if (settings_bgColor) {
|
|
|
|
|
ctx.fillStyle = settings_bgColor;
|
|
|
|
|
ctx.fillRect(settings_left, settings_top, settings_width, settings_height);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (qr) {
|
|
|
|
|
var moduleCount = qr.getModuleCount(),
|
|
|
|
|
moduleWidth = settings.width / moduleCount,
|
|
|
|
|
moduleHeight = settings.height / moduleCount,
|
|
|
|
|
moduleWidth = settings_width / moduleCount,
|
|
|
|
|
moduleHeight = settings_height / moduleCount,
|
|
|
|
|
row, col;
|
|
|
|
|
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
for (row = 0; row < moduleCount; row += 1) {
|
|
|
|
|
for (col = 0; col < moduleCount; col += 1) {
|
|
|
|
|
if (qr.isDark(row, col)) {
|
|
|
|
|
ctx.rect(col * moduleWidth, row * moduleHeight, moduleWidth, moduleHeight);
|
|
|
|
|
ctx.rect(settings_left + col * moduleWidth, settings_top + row * moduleHeight, moduleWidth, moduleHeight);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
ctx.fillStyle = settings.color;
|
|
|
|
|
ctx.fillStyle = settings_color;
|
|
|
|
|
ctx.fill();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
|
|
return drawOnCanvas($canvas, settings);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// Returns a `div` element representing the QR code for the given settings.
|
|
|
|
|
createDiv = function (settings) {
|
|
|
|
|
|
|
|
|
|
var qr = createBestQr(settings.text),
|
|
|
|
|
// some shortcuts to improve compression
|
|
|
|
|
var settings_text = settings.text,
|
|
|
|
|
settings_width = settings.width,
|
|
|
|
|
settings_height = settings.height,
|
|
|
|
|
settings_color = settings.color,
|
|
|
|
|
settings_bgColor = settings.bgColor,
|
|
|
|
|
math_floor = Math.floor,
|
|
|
|
|
|
|
|
|
|
qr = createBestQr(settings_text),
|
|
|
|
|
$div = $('<div/>').css({
|
|
|
|
|
position: 'relative',
|
|
|
|
|
left: 0,
|
|
|
|
|
top: 0,
|
|
|
|
|
padding: 0,
|
|
|
|
|
margin: 0,
|
|
|
|
|
width: settings.width,
|
|
|
|
|
height: settings.height
|
|
|
|
|
width: settings_width,
|
|
|
|
|
height: settings_height
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (settings.bgColor) {
|
|
|
|
|
$div.css('background-color', settings.bgColor);
|
|
|
|
|
if (settings_bgColor) {
|
|
|
|
|
$div.css('background-color', settings_bgColor);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (qr) {
|
|
|
|
|
var moduleCount = qr.getModuleCount(),
|
|
|
|
|
moduleWidth = Math.floor(settings.width / moduleCount),
|
|
|
|
|
moduleHeight = Math.floor(settings.height / moduleCount),
|
|
|
|
|
offsetLeft = Math.floor(0.5 * (settings.width - moduleWidth * moduleCount)),
|
|
|
|
|
offsetTop = Math.floor(0.5 * (settings.height - moduleHeight * moduleCount)),
|
|
|
|
|
moduleWidth = math_floor(settings_width / moduleCount),
|
|
|
|
|
moduleHeight = math_floor(settings_height / moduleCount),
|
|
|
|
|
offsetLeft = math_floor(0.5 * (settings_width - moduleWidth * moduleCount)),
|
|
|
|
|
offsetTop = math_floor(0.5 * (settings_height - moduleHeight * moduleCount)),
|
|
|
|
|
row, col;
|
|
|
|
|
|
|
|
|
|
for (row = 0; row < moduleCount; row += 1) {
|
|
|
|
|
@ -110,13 +142,20 @@
|
|
|
|
|
margin: 0,
|
|
|
|
|
width: moduleWidth,
|
|
|
|
|
height: moduleHeight,
|
|
|
|
|
'background-color': settings.color
|
|
|
|
|
'background-color': settings_color
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return $div;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
createHTML = function (options) {
|
|
|
|
|
|
|
|
|
|
var settings = $.extend({}, defaults, options);
|
|
|
|
|
|
|
|
|
|
return canvasAvailable && settings.render === 'canvas' ? createCanvas(settings) : createDiv(settings);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// Plugin
|
|
|
|
|
// ======
|
|
|
|
|
|
|
|
|
|
@ -127,6 +166,10 @@
|
|
|
|
|
// render method: `'canvas'` or `'div'`
|
|
|
|
|
render: 'canvas',
|
|
|
|
|
|
|
|
|
|
// left and top in pixel if drawn onto existing canvas
|
|
|
|
|
left: 0,
|
|
|
|
|
top: 0,
|
|
|
|
|
|
|
|
|
|
// width and height in pixel
|
|
|
|
|
width: 256,
|
|
|
|
|
height: 256,
|
|
|
|
|
@ -145,11 +188,13 @@
|
|
|
|
|
// -------------------
|
|
|
|
|
$.fn.qrcode = function(options) {
|
|
|
|
|
|
|
|
|
|
var settings = $.extend({}, defaults, options);
|
|
|
|
|
|
|
|
|
|
return this.each(function () {
|
|
|
|
|
|
|
|
|
|
$(this).append(settings.render === 'canvas' ? createCanvas(settings) : createDiv(settings));
|
|
|
|
|
if (this.nodeName.toLowerCase() === 'canvas') {
|
|
|
|
|
drawOnCanvas(this, options);
|
|
|
|
|
} else {
|
|
|
|
|
$(this).append(createHTML(options));
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
Lars Jung
12 years ago