UnknownObject
/
jquery-qrcode
mirror of https://github.com/lrsjng/jquery-qrcode.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update.

Browse Source
master v0.16.0
Lars Jung 6 years ago
parent ac0af48d8e
commit 86948f725f
13 changed files with 5066 additions and 5011 deletions
Show Stats Download Patch File Download Diff File

26
.eslintrc
Unescape Escape View File

@ -5,30 +5,6 @@
es6: true es6: true
node: true node: true
ecmaFeatures:
arrowFunctions: true
binaryLiterals: true
blockBindings: true
classes: false
defaultParams: true
destructuring: true
forOf: true
generators: true
globalReturn: true
jsx: false
modules: true
objectLiteralComputedProperties: true
objectLiteralDuplicateProperties: true
objectLiteralShorthandMethods: true
objectLiteralShorthandProperties: true
octalLiterals: true
regexUFlag: true
regexYFlag: true
spread: true
superInFunctions: false
templateStrings: true
unicodeCodePointEscapes: true
rules: rules:
array-bracket-spacing: [2, never] array-bracket-spacing: [2, never]
arrow-parens: [2, as-needed] arrow-parens: [2, as-needed]
@ -62,7 +38,7 @@
max-depth: [1, 4] max-depth: [1, 4]
max-len: [0, 80, 4] max-len: [0, 80, 4]
max-nested-callbacks: [1, 3] max-nested-callbacks: [1, 3]
max-params: [1, 5] ### max-params: [1, 16] ###
max-statements: [1, 32] ### max-statements: [1, 32] ###
new-cap: 0 new-cap: 0
new-parens: 2 new-parens: 2

5
README.md
Unescape Escape View File

@ -3,6 +3,8 @@
[![license][license-img]][github] [![web][web-img]][web] [![github][github-img]][github] [![license][license-img]][github] [![web][web-img]][web] [![github][github-img]][github]
jQuery plugin to dynamically generate QR codes. Uses [QR Code Generator][qrcode] (MIT). jQuery plugin to dynamically generate QR codes. Uses [QR Code Generator][qrcode] (MIT).
There is a jQuery-free lib named [kjua][kjua] that works in all modern browsers
with crisp codes on all devices.
## License ## License
@ -33,7 +35,8 @@ THE SOFTWARE.
[github]: https://github.com/lrsjng/jquery-qrcode [github]: https://github.com/lrsjng/jquery-qrcode
[license-img]: https://img.shields.io/badge/license-MIT-a0a060.svg?style=flat-square [license-img]: https://img.shields.io/badge/license-MIT-a0a060.svg?style=flat-square
[web-img]: https://img.shields.io/badge/web-larsjung.de/qrcode-a0a060.svg?style=flat-square [web-img]: https://img.shields.io/badge/web-larsjung.de/jquery--qrcode-a0a060.svg?style=flat-square
[github-img]: https://img.shields.io/badge/github-lrsjng/jquery--qrcode-a0a060.svg?style=flat-square [github-img]: https://img.shields.io/badge/github-lrsjng/jquery--qrcode-a0a060.svg?style=flat-square
[qrcode]: https://github.com/kazuhikoarase/qrcode-generator [qrcode]: https://github.com/kazuhikoarase/qrcode-generator
[kjua]: https://larsjung.de/kjua/

533
dist/jquery-qrcode.js vendored
Unescape Escape View File

@ -1,82 +1,179 @@
/*! jquery-qrcode v0.15.0 - https://larsjung.de/jquery-qrcode/ */ /*! jquery-qrcode v0.16.0 - https://larsjung.de/jquery-qrcode/ */
(function (vendor_qrcode) { (function webpackUniversalModuleDefinition(root, factory) {
'use strict'; if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
var jq = window.jQuery; else if(typeof define === 'function' && define.amd)
define("jquery-qrcode", [], factory);
// Check if canvas is available in the browser (as Modernizr does) else if(typeof exports === 'object')
var hasCanvas = (function () { exports["jquery-qrcode"] = factory();
var elem = document.createElement('canvas'); else
return !!(elem.getContext && elem.getContext('2d')); root["jquery-qrcode"] = factory();
}()); })((typeof self !== 'undefined' ? self : this), function() {
return /******/ (function(modules) { // webpackBootstrap
// Wrapper for the original QR code generator. /******/ // The module cache
function createQRCode(text, level, version, quiet) { /******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
var VQRCODE = __webpack_require__(1);
var WIN = window; // eslint-disable-line no-undef
var JQ = WIN.jQuery; // Check if canvas is available in the browser (as Modernizr does)
var HAS_CANVAS = function () {
var el = WIN.document.createElement('canvas');
return !!(el.getContext && el.getContext('2d'));
}();
var is_img_el = function is_img_el(x) {
return x && typeof x.tagName === 'string' && x.tagName.toUpperCase() === 'IMG';
}; // Wrapper for the original QR code generator.
var create_qrcode = function create_qrcode(text, level, version, quiet) {
var qr = {}; var qr = {};
var vqr = VQRCODE(version, level);
var vqr = vendor_qrcode(version, level);
vqr.addData(text); vqr.addData(text);
vqr.make(); vqr.make();
quiet = quiet || 0; quiet = quiet || 0;
var module_count = vqr.getModuleCount();
var quiet_module_count = module_count + 2 * quiet;
var qrModuleCount = vqr.getModuleCount(); var is_dark = function is_dark(row, col) {
var quietModuleCount = vqr.getModuleCount() + 2 * quiet;
function isDark(row, col) {
row -= quiet; row -= quiet;
col -= quiet; col -= quiet;
return row >= 0 && row < module_count && col >= 0 && col < module_count && vqr.isDark(row, col);
};
if (row < 0 || row >= qrModuleCount || col < 0 || col >= qrModuleCount) { var add_blank = function add_blank(l, t, r, b) {
return false; var prev_is_dark = qr.is_dark;
} var module_size = 1 / quiet_module_count;
return vqr.isDark(row, col);
}
function addBlank(l, t, r, b) {
var prevIsDark = qr.isDark;
var moduleSize = 1 / quietModuleCount;
qr.isDark = function (row, col) {
var ml = col * moduleSize;
var mt = row * moduleSize;
var mr = ml + moduleSize;
var mb = mt + moduleSize;
return prevIsDark(row, col) && (l > mr || ml > r || t > mb || mt > b); qr.is_dark = function (row, col) {
var ml = col * module_size;
var mt = row * module_size;
var mr = ml + module_size;
var mb = mt + module_size;
return prev_is_dark(row, col) && (l > mr || ml > r || t > mb || mt > b);
};
}; };
}
qr.text = text; qr.text = text;
qr.level = level; qr.level = level;
qr.version = version; qr.version = version;
qr.moduleCount = quietModuleCount; qr.module_count = quiet_module_count;
qr.isDark = isDark; qr.is_dark = is_dark;
qr.addBlank = addBlank; qr.add_blank = add_blank;
return qr; return qr;
} }; // Returns a minimal QR code for the given text starting with version `min_ver`.
// Returns `undefined` if `text` is too long to be encoded in `max_ver`.
var create_min_qrcode = function create_min_qrcode(text, level, min_ver, max_ver, quiet) {
min_ver = Math.max(1, min_ver || 1);
max_ver = Math.min(40, max_ver || 40);
// Returns a minimal QR code for the given text starting with version `minVersion`. for (var ver = min_ver; ver <= max_ver; ver += 1) {
// Returns `undefined` if `text` is too long to be encoded in `maxVersion`.
function createMinQRCode(text, level, minVersion, maxVersion, quiet) {
minVersion = Math.max(1, minVersion || 1);
maxVersion = Math.min(40, maxVersion || 40);
for (var version = minVersion; version <= maxVersion; version += 1) {
try { try {
return createQRCode(text, level, version, quiet); return create_qrcode(text, level, ver, quiet);
} catch (err) {/* empty */} } catch (err) {
/* empty */
} }
return undefined;
} }
function drawBackgroundLabel(qr, context, settings) { return undefined;
};
var draw_background_label = function draw_background_label(qr, context, settings) {
var size = settings.size; var size = settings.size;
var font = 'bold ' + settings.mSize * size + 'px ' + settings.fontname; var font = 'bold ' + settings.mSize * size + 'px ' + settings.fontname;
var ctx = jq('<canvas/>')[0].getContext('2d'); var ctx = JQ('<canvas/>')[0].getContext('2d');
ctx.font = font; ctx.font = font;
var w = ctx.measureText(settings.label).width; var w = ctx.measureText(settings.label).width;
var sh = settings.mSize; var sh = settings.mSize;
var sw = w / size; var sw = w / size;
@ -88,18 +185,18 @@
if (settings.mode === 1) { if (settings.mode === 1) {
// Strip // Strip
qr.addBlank(0, st - pad, size, sb + pad); qr.add_blank(0, st - pad, size, sb + pad);
} else { } else {
// Box // Box
qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad); qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
} }
context.fillStyle = settings.fontcolor; context.fillStyle = settings.fontcolor;
context.font = font; context.font = font;
context.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size); context.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size);
} };
function drawBackgroundImage(qr, context, settings) { var draw_background_img = function draw_background_img(qr, context, settings) {
var size = settings.size; var size = settings.size;
var w = settings.image.naturalWidth || 1; var w = settings.image.naturalWidth || 1;
var h = settings.image.naturalHeight || 1; var h = settings.image.naturalHeight || 1;
@ -113,17 +210,17 @@
if (settings.mode === 3) { if (settings.mode === 3) {
// Strip // Strip
qr.addBlank(0, st - pad, size, sb + pad); qr.add_blank(0, st - pad, size, sb + pad);
} else { } else {
// Box // Box
qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad); qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
} }
context.drawImage(settings.image, sl * size, st * size, sw * size, sh * size); context.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);
} };
function drawBackground(qr, context, settings) { var draw_background = function draw_background(qr, context, settings) {
if (jq(settings.background).is('img')) { if (is_img_el(settings.background)) {
context.drawImage(settings.background, 0, 0, settings.size, settings.size); context.drawImage(settings.background, 0, 0, settings.size, settings.size);
} else if (settings.background) { } else if (settings.background) {
context.fillStyle = settings.background; context.fillStyle = settings.background;
@ -131,20 +228,21 @@
} }
var mode = settings.mode; var mode = settings.mode;
if (mode === 1 || mode === 2) { if (mode === 1 || mode === 2) {
drawBackgroundLabel(qr, context, settings); draw_background_label(qr, context, settings);
} else if (mode === 3 || mode === 4) { } else if (is_img_el(settings.image) && (mode === 3 || mode === 4)) {
drawBackgroundImage(qr, context, settings); draw_background_img(qr, context, settings);
}
} }
};
function drawModuleDefault(qr, context, settings, left, top, width, row, col) { var draw_modules_default = function draw_modules_default(qr, context, settings, left, top, width, row, col) {
if (qr.isDark(row, col)) { if (qr.is_dark(row, col)) {
context.rect(left, top, width, width); context.rect(left, top, width, width);
} }
} };
function drawModuleRoundedDark(ctx, l, t, r, b, rad, nw, ne, se, sw) { var draw_modules_rounded_dark = function draw_modules_rounded_dark(ctx, l, t, r, b, rad, nw, ne, se, sw) {
if (nw) { if (nw) {
ctx.moveTo(l + rad, t); ctx.moveTo(l + rad, t);
} else { } else {
@ -178,9 +276,9 @@
} else { } else {
ctx.lineTo(l, t); ctx.lineTo(l, t);
} }
} };
function drawModuleRoundendLight(ctx, l, t, r, b, rad, nw, ne, se, sw) { var draw_modules_rounded_light = function draw_modules_rounded_light(ctx, l, t, r, b, rad, nw, ne, se, sw) {
if (nw) { if (nw) {
ctx.moveTo(l + rad, t); ctx.moveTo(l + rad, t);
ctx.lineTo(l, t); ctx.lineTo(l, t);
@ -208,10 +306,10 @@
ctx.lineTo(l, b - rad); ctx.lineTo(l, b - rad);
ctx.arcTo(l, b, l + rad, b, rad); ctx.arcTo(l, b, l + rad, b, rad);
} }
} };
function drawModuleRounded(qr, context, settings, left, top, width, row, col) { var draw_modules_rounded = function draw_modules_rounded(qr, context, settings, left, top, width, row, col) {
var isDark = qr.isDark; var is_dark = qr.is_dark;
var right = left + width; var right = left + width;
var bottom = top + width; var bottom = top + width;
var radius = settings.radius * width; var radius = settings.radius * width;
@ -219,45 +317,46 @@
var rowB = row + 1; var rowB = row + 1;
var colL = col - 1; var colL = col - 1;
var colR = col + 1; var colR = col + 1;
var center = isDark(row, col); var center = is_dark(row, col);
var northwest = isDark(rowT, colL); var northwest = is_dark(rowT, colL);
var north = isDark(rowT, col); var north = is_dark(rowT, col);
var northeast = isDark(rowT, colR); var northeast = is_dark(rowT, colR);
var east = isDark(row, colR); var east = is_dark(row, colR);
var southeast = isDark(rowB, colR); var southeast = is_dark(rowB, colR);
var south = isDark(rowB, col); var south = is_dark(rowB, col);
var southwest = isDark(rowB, colL); var southwest = is_dark(rowB, colL);
var west = isDark(row, colL); var west = is_dark(row, colL);
if (center) { if (center) {
drawModuleRoundedDark(context, left, top, right, bottom, radius, !north && !west, !north && !east, !south && !east, !south && !west); draw_modules_rounded_dark(context, left, top, right, bottom, radius, !north && !west, !north && !east, !south && !east, !south && !west);
} else { } else {
drawModuleRoundendLight(context, left, top, right, bottom, radius, north && west && northwest, north && east && northeast, south && east && southeast, south && west && southwest); draw_modules_rounded_light(context, left, top, right, bottom, radius, north && west && northwest, north && east && northeast, south && east && southeast, south && west && southwest);
}
} }
};
function drawModules(qr, context, settings) { var draw_modules = function draw_modules(qr, context, settings) {
var moduleCount = qr.moduleCount; var module_count = qr.module_count;
var moduleSize = settings.size / moduleCount; var module_size = settings.size / module_count;
var fn = drawModuleDefault; var fn = draw_modules_default;
var row; var row;
var col; var col;
if (settings.radius > 0 && settings.radius <= 0.5) { if (settings.radius > 0 && settings.radius <= 0.5) {
fn = drawModuleRounded; fn = draw_modules_rounded;
} }
context.beginPath(); context.beginPath();
for (row = 0; row < moduleCount; row += 1) {
for (col = 0; col < moduleCount; col += 1) {
var l = settings.left + col * moduleSize;
var t = settings.top + row * moduleSize;
var w = moduleSize;
for (row = 0; row < module_count; row += 1) {
for (col = 0; col < module_count; col += 1) {
var l = settings.left + col * module_size;
var t = settings.top + row * module_size;
var w = module_size;
fn(qr, context, settings, l, t, w, row, col); fn(qr, context, settings, l, t, w, row, col);
} }
} }
if (jq(settings.fill).is('img')) {
if (is_img_el(settings.fill)) {
context.strokeStyle = 'rgba(0,0,0,0.5)'; context.strokeStyle = 'rgba(0,0,0,0.5)';
context.lineWidth = 2; context.lineWidth = 2;
context.stroke(); context.stroke();
@ -265,7 +364,6 @@
context.globalCompositeOperation = 'destination-out'; context.globalCompositeOperation = 'destination-out';
context.fill(); context.fill();
context.globalCompositeOperation = prev; context.globalCompositeOperation = prev;
context.clip(); context.clip();
context.drawImage(settings.fill, 0, 0, settings.size, settings.size); context.drawImage(settings.fill, 0, 0, settings.size, settings.size);
context.restore(); context.restore();
@ -273,55 +371,52 @@
context.fillStyle = settings.fill; context.fillStyle = settings.fill;
context.fill(); context.fill();
} }
} }; // Draws QR code to the given `canvas` and returns it.
var draw_on_canvas = function draw_on_canvas(canvas, settings) {
var qr = create_min_qrcode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
// Draws QR code to the given `canvas` and returns it.
function drawOnCanvas(canvas, settings) {
var qr = createMinQRCode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
if (!qr) { if (!qr) {
return null; return null;
} }
var $canvas = jq(canvas).data('qrcode', qr); var $canvas = JQ(canvas).data('qrcode', qr);
var context = $canvas[0].getContext('2d'); var context = $canvas[0].getContext('2d');
draw_background(qr, context, settings);
draw_modules(qr, context, settings);
return $canvas;
}; // Returns a `canvas` element representing the QR code for the given settings.
drawBackground(qr, context, settings);
drawModules(qr, context, settings);
return $canvas; var create_canvas = function create_canvas(settings) {
} var $canvas = JQ('<canvas/>').attr('width', settings.size).attr('height', settings.size);
return draw_on_canvas($canvas, settings);
}; // Returns an `image` element representing the QR code for the given settings.
// Returns a `canvas` element representing the QR code for the given settings.
function createCanvas(settings) {
var $canvas = jq('<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. var create_img = function create_img(settings) {
function createImage(settings) { return JQ('<img/>').attr('src', create_canvas(settings)[0].toDataURL('image/png'));
return jq('<img/>').attr('src', createCanvas(settings)[0].toDataURL('image/png')); }; // Returns a `div` element representing the QR code for the given settings.
}
var create_div = function create_div(settings) {
var qr = create_min_qrcode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
// Returns a `div` element representing the QR code for the given settings.
function createDiv(settings) {
var qr = createMinQRCode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
if (!qr) { if (!qr) {
return null; return null;
} } // some shortcuts to improve compression
// some shortcuts to improve compression
var settings_size = settings.size; var settings_size = settings.size;
var settings_bgColor = settings.background; var settings_bgColor = settings.background;
var math_floor = Math.floor; var math_floor = Math.floor;
var module_count = qr.module_count;
var moduleCount = qr.moduleCount; var module_size = math_floor(settings_size / module_count);
var moduleSize = math_floor(settings_size / moduleCount); var offset = math_floor(0.5 * (settings_size - module_size * module_count));
var offset = math_floor(0.5 * (settings_size - moduleSize * moduleCount));
var row; var row;
var col; var col;
var container_css = {
var containerCSS = {
position: 'relative', position: 'relative',
left: 0, left: 0,
top: 0, top: 0,
@ -330,86 +425,67 @@
width: settings_size, width: settings_size,
height: settings_size height: settings_size
}; };
var darkCSS = { var dark_css = {
position: 'absolute', position: 'absolute',
padding: 0, padding: 0,
margin: 0, margin: 0,
width: moduleSize, width: module_size,
height: moduleSize, height: module_size,
'background-color': settings.fill 'background-color': settings.fill
}; };
var $div = JQ('<div/>').data('qrcode', qr).css(container_css);
var $div = jq('<div/>').data('qrcode', qr).css(containerCSS);
if (settings_bgColor) { if (settings_bgColor) {
$div.css('background-color', settings_bgColor); $div.css('background-color', settings_bgColor);
} }
for (row = 0; row < moduleCount; row += 1) { for (row = 0; row < module_count; row += 1) {
for (col = 0; col < moduleCount; col += 1) { for (col = 0; col < module_count; col += 1) {
if (qr.isDark(row, col)) { if (qr.is_dark(row, col)) {
jq('<div/>') JQ('<div/>').css(dark_css).css({
.css(darkCSS) left: offset + col * module_size,
.css({ top: offset + row * module_size
left: offset + col * moduleSize, }).appendTo($div);
top: offset + row * moduleSize
})
.appendTo($div);
} }
} }
} }
return $div; return $div;
} };
function createHTML(settings) {
if (hasCanvas && settings.render === 'canvas') {
return createCanvas(settings);
} else if (hasCanvas && settings.render === 'image') {
return createImage(settings);
}
return createDiv(settings); var create_html = function create_html(settings) {
if (HAS_CANVAS && settings.render === 'canvas') {
return create_canvas(settings);
} else if (HAS_CANVAS && settings.render === 'image') {
return create_img(settings);
} }
// Plugin return create_div(settings);
// ====== };
// Default settings var DEFAULTS = {
// ----------------
var defaults = {
// render method: `'canvas'`, `'image'` or `'div'` // render method: `'canvas'`, `'image'` or `'div'`
render: 'canvas', render: 'canvas',
// version range somewhere in 1 .. 40 // version range somewhere in 1 .. 40
minVersion: 1, minVersion: 1,
maxVersion: 40, maxVersion: 40,
// error correction level: `'L'`, `'M'`, `'Q'` or `'H'` // error correction level: `'L'`, `'M'`, `'Q'` or `'H'`
ecLevel: 'L', ecLevel: 'L',
// offset in pixel if drawn onto existing canvas // offset in pixel if drawn onto existing canvas
left: 0, left: 0,
top: 0, top: 0,
// size in pixel // size in pixel
size: 200, size: 200,
// code color or image element // code color or image element
fill: '#000', fill: '#000',
// background color or image element, `null` for transparent background // background color or image element, `null` for transparent background
background: null, background: '#fff',
// content // content
text: 'no text', text: 'no text',
// corner radius relative to module width: 0.0 .. 0.5 // corner radius relative to module width: 0.0 .. 0.5
radius: 0, radius: 0,
// quiet zone in modules // quiet zone in modules
quiet: 0, quiet: 0,
// modes // modes
// 0: normal // 0: normal
// 1: label strip // 1: label strip
@ -417,51 +493,48 @@
// 3: image strip // 3: image strip
// 4: image box // 4: image box
mode: 0, mode: 0,
mSize: 0.1, mSize: 0.1,
mPosX: 0.5, mPosX: 0.5,
mPosY: 0.5, mPosY: 0.5,
label: 'no label', label: 'no label',
fontname: 'sans', fontname: 'sans',
fontcolor: '#000', fontcolor: '#000',
image: null image: null
}; };
// Register the plugin
// -------------------
jq.fn.qrcode = function (options) {
var settings = jq.extend({}, defaults, options);
JQ.fn.qrcode = module.exports = function main(options) {
var settings = JQ.extend({}, DEFAULTS, options);
return this.each(function (idx, el) { return this.each(function (idx, el) {
if (el.nodeName.toLowerCase() === 'canvas') { if (el.nodeName.toLowerCase() === 'canvas') {
drawOnCanvas(el, settings); draw_on_canvas(el, settings);
} else { } else {
jq(el).append(createHTML(settings)); JQ(el).append(create_html(settings));
} }
}); });
}; };
}(function () {
// `qrcode` is the single public function defined by the `QR Code Generator` /***/ }),
//--------------------------------------------------------------------- /* 1 */
// /***/ (function(module, exports) {
// QR Code Generator for JavaScript
// //---------------------------------------------------------------------
// Copyright (c) 2009 Kazuhiko Arase //
// // QR Code Generator for JavaScript
// URL: http://www.d-project.com/ //
// // Copyright (c) 2009 Kazuhiko Arase
// Licensed under the MIT license: //
// http://www.opensource.org/licenses/mit-license.php // URL: http://www.d-project.com/
// //
// The word 'QR Code' is registered trademark of // Licensed under the MIT license:
// DENSO WAVE INCORPORATED // http://www.opensource.org/licenses/mit-license.php
// http://www.denso-wave.com/qrcode/faqpatent-e.html //
// // The word 'QR Code' is registered trademark of
//--------------------------------------------------------------------- // DENSO WAVE INCORPORATED
// http://www.denso-wave.com/qrcode/faqpatent-e.html
var qrcode = function() { //
//---------------------------------------------------------------------
var qrcode = function() {
//--------------------------------------------------------------------- //---------------------------------------------------------------------
// qrcode // qrcode
@ -2257,35 +2330,35 @@
// returns qrcode function. // returns qrcode function.
return qrcode; return qrcode;
}(); }();
(function (factory) { (function (factory) {
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
define([], factory); define([], factory);
} else if (typeof exports === 'object') { } else if (typeof exports === 'object') {
module.exports = factory(); module.exports = factory();
} }
}(function () { }(function () {
return qrcode; return qrcode;
})); }));
//--------------------------------------------------------------------- //---------------------------------------------------------------------
// //
// QR Code Generator for JavaScript UTF8 Support (optional) // QR Code Generator for JavaScript UTF8 Support (optional)
// //
// Copyright (c) 2011 Kazuhiko Arase // Copyright (c) 2011 Kazuhiko Arase
// //
// URL: http://www.d-project.com/ // URL: http://www.d-project.com/
// //
// Licensed under the MIT license: // Licensed under the MIT license:
// http://www.opensource.org/licenses/mit-license.php // http://www.opensource.org/licenses/mit-license.php
// //
// The word 'QR Code' is registered trademark of // The word 'QR Code' is registered trademark of
// DENSO WAVE INCORPORATED // DENSO WAVE INCORPORATED
// http://www.denso-wave.com/qrcode/faqpatent-e.html // http://www.denso-wave.com/qrcode/faqpatent-e.html
// //
//--------------------------------------------------------------------- //---------------------------------------------------------------------
!function(qrcode) { !function(qrcode) {
//--------------------------------------------------------------------- //---------------------------------------------------------------------
// overwrite qrcode.stringToBytes // overwrite qrcode.stringToBytes
@ -2326,7 +2399,9 @@
return toUTF8Array(s); return toUTF8Array(s);
}; };
}(qrcode); }(qrcode);
return qrcode; // eslint-disable-line no-undef /***/ })
}())); /******/ ]);
});

4
dist/jquery-qrcode.min.js vendored
View File

File diff suppressed because one or more lines are too long

15
ghu.js
Unescape Escape View File

@ -1,11 +1,10 @@
const {resolve, join} = require('path'); const {resolve, join} = require('path');
const {ghu, includeit, pug, jszip, mapfn, read, remove, uglify, wrap, write} = require('ghu'); const {ghu, includeit, pug, jszip, mapfn, read, remove, webpack, uglify, wrap, write} = require('ghu');
const NAME = 'jquery-qrcode'; const NAME = 'jquery-qrcode';
const ROOT = resolve(__dirname); const ROOT = resolve(__dirname);
const SRC = join(ROOT, 'src'); const SRC = join(ROOT, 'src');
const VENDOR = join(ROOT, 'vendor');
const BUILD = join(ROOT, 'build'); const BUILD = join(ROOT, 'build');
const DIST = join(ROOT, 'dist'); const DIST = join(ROOT, 'dist');
@ -25,11 +24,12 @@ ghu.task('clean', 'delete build folder', () => {
ghu.task('build:scripts', runtime => { ghu.task('build:scripts', runtime => {
return read(`${SRC}/${NAME}.js`) return read(`${SRC}/${NAME}.js`)
.then(webpack(webpack.cfg_umd(NAME, [SRC]), {showStats: false}))
.then(includeit()) .then(includeit())
.then(wrap(runtime.commentJs)) .then(wrap(runtime.commentJs))
.then(write(`${DIST}/${NAME}.js`, {overwrite: true})) .then(write(`${DIST}/${NAME}.js`, {overwrite: true}))
.then(write(`${BUILD}/${NAME}-${runtime.pkg.version}.js`, {overwrite: true})) .then(write(`${BUILD}/${NAME}-${runtime.pkg.version}.js`, {overwrite: true}))
.then(uglify({compressor: {warnings: false}})) .then(uglify())
.then(wrap(runtime.commentJs)) .then(wrap(runtime.commentJs))
.then(write(`${DIST}/${NAME}.min.js`, {overwrite: true})) .then(write(`${DIST}/${NAME}.min.js`, {overwrite: true}))
.then(write(`${BUILD}/${NAME}-${runtime.pkg.version}.min.js`, {overwrite: true})); .then(write(`${BUILD}/${NAME}-${runtime.pkg.version}.min.js`, {overwrite: true}));
@ -40,7 +40,12 @@ ghu.task('build:demo', runtime => {
read(`${SRC}/demo/*.pug`) read(`${SRC}/demo/*.pug`)
.then(pug({pkg: runtime.pkg})) .then(pug({pkg: runtime.pkg}))
.then(write(mapfn.p(SRC, BUILD).s('.pug', ''), {overwrite: true})), .then(write(mapfn.p(SRC, BUILD).s('.pug', ''), {overwrite: true})),
read(`${SRC}/demo/*, !**/*.pug`) read(`${SRC}/demo/*.js`)
.then(webpack(webpack.cfg([SRC]), {showStats: false}))
.then(uglify())
.then(wrap(runtime.commentJs))
.then(write(mapfn.p(SRC, BUILD), {overwrite: true})),
read(`${SRC}/demo/*, !**/*.pug, !**/*.js`)
.then(write(mapfn.p(SRC, BUILD), {overwrite: true})), .then(write(mapfn.p(SRC, BUILD), {overwrite: true})),
read(`${ROOT}/node_modules/jquery/dist/jquery.min.js`) read(`${ROOT}/node_modules/jquery/dist/jquery.min.js`)
@ -50,8 +55,6 @@ ghu.task('build:demo', runtime => {
ghu.task('build:copy', () => { ghu.task('build:copy', () => {
return Promise.all([ return Promise.all([
read(`${VENDOR}/demo/*`)
.then(write(mapfn.p(VENDOR, BUILD), {overwrite: true})),
read(`${ROOT}/*.md`) read(`${ROOT}/*.md`)
.then(write(mapfn.p(ROOT, BUILD), {overwrite: true})) .then(write(mapfn.p(ROOT, BUILD), {overwrite: true}))
]); ]);

8045
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
Unescape Escape View File

@ -1,7 +1,7 @@
{ {
"name": "jquery-qrcode", "name": "jquery-qrcode",
"title": "jQuery.qrcode", "title": "jQuery.qrcode",
"version": "0.15.0", "version": "0.16.0",
"description": "Generate QR codes dynamically.", "description": "Generate QR codes dynamically.",
"homepage": "https://larsjung.de/jquery-qrcode/", "homepage": "https://larsjung.de/jquery-qrcode/",
"bugs": "https://github.com/lrsjng/jquery-qrcode/issues", "bugs": "https://github.com/lrsjng/jquery-qrcode/issues",
@ -17,9 +17,11 @@
"url": "https://github.com/lrsjng/jquery-qrcode.git" "url": "https://github.com/lrsjng/jquery-qrcode.git"
}, },
"devDependencies": { "devDependencies": {
"eslint": "5.15.1", "@babel/core": "7.4.3",
"ghu": "0.13.0", "@babel/preset-env": "7.4.3",
"jquery": "3.3.1" "eslint": "5.16.0",
"ghu": "0.17.0",
"jquery": "3.4.0"
}, },
"engines": { "engines": {
"node": ">=8.0.0" "node": ">=8.0.0"

9
src/.eslintrc
Unescape Escape View File

@ -1,9 +0,0 @@
---
env:
browser: true
rules:
func-names: 0
no-var: 0
prefer-arrow-callback: 0
strict: 0

8
src/demo/index.html.pug
Unescape Escape View File

@ -3,13 +3,11 @@ html(lang='en')
head head
meta(charset='utf-8') meta(charset='utf-8')
meta(http-equiv='x-ua-compatible', content='ie=edge') meta(http-equiv='x-ua-compatible', content='ie=edge')
title #{pkg.title} #{pkg.version} · Demo title #{pkg.title} #{pkg.version} Demo
meta(name='description', content=`demo for ${pkg.title} (${pkg.homepage})`) meta(name='description', content=`Demo for ${pkg.title} (${pkg.homepage}).`)
meta(name='viewport', content='width=device-width, initial-scale=1') meta(name='viewport', content='width=device-width, initial-scale=1')
link(rel='shortcut icon', type='image/png', href='dummy.png')
link(rel='apple-touch-icon-precomposed', type='image/png', href='dummy.png')
link(href='//fonts.googleapis.com/css?family=Ubuntu:300,400,700', rel='stylesheet')
link(href='styles.css', rel='stylesheet') link(href='styles.css', rel='stylesheet')
link(href='//fonts.googleapis.com/css?family=Ubuntu:300,400,700', rel='stylesheet')
script(src='jquery.min.js') script(src='jquery.min.js')
script(src=`../jquery-qrcode-${pkg.version}.js`) script(src=`../jquery-qrcode-${pkg.version}.js`)
script(src='scripts.js') script(src='scripts.js')

110
src/demo/scripts.js
Unescape Escape View File

@ -1,8 +1,7 @@
(function () { const WIN = window; // eslint-disable-line no-undef
'use strict'; const JQ = WIN.jQuery;
var jq = window.jQuery; const GUI_VALUE_PAIRS = [
var guiValuePairs = [
['size', 'px'], ['size', 'px'],
['minversion', ''], ['minversion', ''],
['quiet', ' modules'], ['quiet', ' modules'],
@ -10,75 +9,78 @@
['msize', '%'], ['msize', '%'],
['mposx', '%'], ['mposx', '%'],
['mposy', '%'] ['mposy', '%']
]; ];
function updateGui() { const update_gui = () => {
jq.each(guiValuePairs, function (idx, pair) { JQ.each(GUI_VALUE_PAIRS, (idx, pair) => {
var $label = jq('label[for="' + pair[0] + '"]'); const $label = JQ('label[for="' + pair[0] + '"]');
$label.text($label.text().replace(/:.*/, ': ' + jq('#' + pair[0]).val() + pair[1])); $label.text($label.text().replace(/:.*/, ': ' + JQ('#' + pair[0]).val() + pair[1]));
}); });
} };
function updateQrCode() { const update_qrcode = () => {
var options = { const options = {
render: jq('#render').val(), render: JQ('#render').val(),
ecLevel: jq('#eclevel').val(), ecLevel: JQ('#eclevel').val(),
minVersion: parseInt(jq('#minversion').val(), 10), minVersion: parseInt(JQ('#minversion').val(), 10),
fill: jq('#fill').val(), fill: JQ('#fill').val(),
background: jq('#background').val(), background: JQ('#background').val(),
// fill: jq('#img-buffer')[0],
text: jq('#text').val(), text: JQ('#text').val(),
size: parseInt(jq('#size').val(), 10), size: parseInt(JQ('#size').val(), 10),
radius: parseInt(jq('#radius').val(), 10) * 0.01, radius: parseInt(JQ('#radius').val(), 10) * 0.01,
quiet: parseInt(jq('#quiet').val(), 10), quiet: parseInt(JQ('#quiet').val(), 10),
mode: parseInt(jq('#mode').val(), 10), mode: parseInt(JQ('#mode').val(), 10),
mSize: parseInt(jq('#msize').val(), 10) * 0.01, mSize: parseInt(JQ('#msize').val(), 10) * 0.01,
mPosX: parseInt(jq('#mposx').val(), 10) * 0.01, mPosX: parseInt(JQ('#mposx').val(), 10) * 0.01,
mPosY: parseInt(jq('#mposy').val(), 10) * 0.01, mPosY: parseInt(JQ('#mposy').val(), 10) * 0.01,
label: jq('#label').val(), label: JQ('#label').val(),
fontname: jq('#font').val(), fontname: JQ('#font').val(),
fontcolor: jq('#fontcolor').val(), fontcolor: JQ('#fontcolor').val(),
image: jq('#img-buffer')[0] image: JQ('#img-buffer')[0]
}; };
jq('#container').empty().qrcode(options); // options.fill = JQ('#img-buffer')[0];
} // options.fill = 'rgba(255,0,0,0.5)';
// options.background = JQ('#img-buffer')[0];
// options.background = 'rgba(255,0,0,0.5)';
function update() { JQ('#container').empty().qrcode(options);
updateGui(); };
updateQrCode();
} const update = () => {
update_gui();
update_qrcode();
};
function onImageInput() { const on_img_input = () => {
var input = jq('#image')[0]; const input = JQ('#image')[0];
if (input.files && input.files[0]) { if (input.files && input.files[0]) {
var reader = new FileReader(); const reader = new WIN.FileReader();
reader.onload = function (event) { reader.onload = event => {
jq('#img-buffer').attr('src', event.target.result); JQ('#img-buffer').attr('src', event.target.result);
jq('#mode').val('4'); JQ('#mode').val('4');
setTimeout(update, 250); setTimeout(update, 250);
}; };
reader.readAsDataURL(input.files[0]); reader.readAsDataURL(input.files[0]);
} }
} };
function download() { const download = () => {
jq('#download').attr('href', jq('#container canvas')[0].toDataURL('image/png')); JQ('#download').attr('href', JQ('#container canvas')[0].toDataURL('image/png'));
} };
function init() { const init = () => {
jq('#download').on('click', download); JQ('#download').on('click', download);
jq('#image').on('change', onImageInput); JQ('#image').on('change', on_img_input);
jq('input, textarea, select').on('input change', update); JQ('input, textarea, select').on('input change', update);
jq(window).on('load', update); JQ(WIN).on('load', update);
update(); update();
} };
jq(init); JQ(init);
}());

4
src/demo/styles.css
Unescape Escape View File

@ -1,5 +1,5 @@
body { body {
font-family: 'Ubuntu', 'Arial', 'sans'; font-family: 'Ubuntu', 'sans';
margin: 0; margin: 0;
padding: 0; padding: 0;
text-align: center; text-align: center;
@ -74,7 +74,7 @@ label {
} }
input, textarea, select { input, textarea, select {
font-family: 'Ubuntu', 'Arial', 'sans'; font-family: 'Ubuntu', 'sans';
display: block; display: block;
background-color: #fff; background-color: #fff;
margin: 2px; margin: 2px;

382
src/jquery-qrcode.js vendored
Unescape Escape View File

@ -1,149 +1,146 @@
(function (vendor_qrcode) { const VQRCODE = require('./vqrcode');
'use strict';
var jq = window.jQuery; const WIN = window; // eslint-disable-line no-undef
const JQ = WIN.jQuery;
// Check if canvas is available in the browser (as Modernizr does) // Check if canvas is available in the browser (as Modernizr does)
var hasCanvas = (function () { const HAS_CANVAS = (() => {
var elem = document.createElement('canvas'); const el = WIN.document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d')); return !!(el.getContext && el.getContext('2d'));
}()); })();
// Wrapper for the original QR code generator. const is_img_el = x => x && typeof x.tagName === 'string' && x.tagName.toUpperCase() === 'IMG';
function createQRCode(text, level, version, quiet) {
var qr = {};
var vqr = vendor_qrcode(version, level); // Wrapper for the original QR code generator.
const create_qrcode = (text, level, version, quiet) => {
const qr = {};
const vqr = VQRCODE(version, level);
vqr.addData(text); vqr.addData(text);
vqr.make(); vqr.make();
quiet = quiet || 0; quiet = quiet || 0;
var qrModuleCount = vqr.getModuleCount(); const module_count = vqr.getModuleCount();
var quietModuleCount = vqr.getModuleCount() + 2 * quiet; const quiet_module_count = module_count + 2 * quiet;
function isDark(row, col) { const is_dark = (row, col) => {
row -= quiet; row -= quiet;
col -= quiet; col -= quiet;
return row >= 0 && row < module_count && col >= 0 && col < module_count && vqr.isDark(row, col);
};
if (row < 0 || row >= qrModuleCount || col < 0 || col >= qrModuleCount) { const add_blank = (l, t, r, b) => {
return false; const prev_is_dark = qr.is_dark;
} const module_size = 1 / quiet_module_count;
return vqr.isDark(row, col);
}
function addBlank(l, t, r, b) {
var prevIsDark = qr.isDark;
var moduleSize = 1 / quietModuleCount;
qr.isDark = function (row, col) {
var ml = col * moduleSize;
var mt = row * moduleSize;
var mr = ml + moduleSize;
var mb = mt + moduleSize;
return prevIsDark(row, col) && (l > mr || ml > r || t > mb || mt > b); qr.is_dark = (row, col) => {
const ml = col * module_size;
const mt = row * module_size;
const mr = ml + module_size;
const mb = mt + module_size;
return prev_is_dark(row, col) && (l > mr || ml > r || t > mb || mt > b);
};
}; };
}
qr.text = text; qr.text = text;
qr.level = level; qr.level = level;
qr.version = version; qr.version = version;
qr.moduleCount = quietModuleCount; qr.module_count = quiet_module_count;
qr.isDark = isDark; qr.is_dark = is_dark;
qr.addBlank = addBlank; qr.add_blank = add_blank;
return qr; return qr;
} };
// Returns a minimal QR code for the given text starting with version `minVersion`. // Returns a minimal QR code for the given text starting with version `min_ver`.
// Returns `undefined` if `text` is too long to be encoded in `maxVersion`. // Returns `undefined` if `text` is too long to be encoded in `max_ver`.
function createMinQRCode(text, level, minVersion, maxVersion, quiet) { const create_min_qrcode = (text, level, min_ver, max_ver, quiet) => {
minVersion = Math.max(1, minVersion || 1); min_ver = Math.max(1, min_ver || 1);
maxVersion = Math.min(40, maxVersion || 40); max_ver = Math.min(40, max_ver || 40);
for (var version = minVersion; version <= maxVersion; version += 1) { for (let ver = min_ver; ver <= max_ver; ver += 1) {
try { try {
return createQRCode(text, level, version, quiet); return create_qrcode(text, level, ver, quiet);
} catch (err) {/* empty */} } catch (err) {/* empty */}
} }
return undefined; return undefined;
} };
function drawBackgroundLabel(qr, context, settings) { const draw_background_label = (qr, context, settings) => {
var size = settings.size; const size = settings.size;
var font = 'bold ' + settings.mSize * size + 'px ' + settings.fontname; const font = 'bold ' + settings.mSize * size + 'px ' + settings.fontname;
var ctx = jq('<canvas/>')[0].getContext('2d'); const ctx = JQ('<canvas/>')[0].getContext('2d');
ctx.font = font; ctx.font = font;
var w = ctx.measureText(settings.label).width; const w = ctx.measureText(settings.label).width;
var sh = settings.mSize; const sh = settings.mSize;
var sw = w / size; const sw = w / size;
var sl = (1 - sw) * settings.mPosX; const sl = (1 - sw) * settings.mPosX;
var st = (1 - sh) * settings.mPosY; const st = (1 - sh) * settings.mPosY;
var sr = sl + sw; const sr = sl + sw;
var sb = st + sh; const sb = st + sh;
var pad = 0.01; const pad = 0.01;
if (settings.mode === 1) { if (settings.mode === 1) {
// Strip // Strip
qr.addBlank(0, st - pad, size, sb + pad); qr.add_blank(0, st - pad, size, sb + pad);
} else { } else {
// Box // Box
qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad); qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
} }
context.fillStyle = settings.fontcolor; context.fillStyle = settings.fontcolor;
context.font = font; context.font = font;
context.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size); context.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size);
} };
function drawBackgroundImage(qr, context, settings) { const draw_background_img = (qr, context, settings) => {
var size = settings.size; const size = settings.size;
var w = settings.image.naturalWidth || 1; const w = settings.image.naturalWidth || 1;
var h = settings.image.naturalHeight || 1; const h = settings.image.naturalHeight || 1;
var sh = settings.mSize; const sh = settings.mSize;
var sw = sh * w / h; const sw = sh * w / h;
var sl = (1 - sw) * settings.mPosX; const sl = (1 - sw) * settings.mPosX;
var st = (1 - sh) * settings.mPosY; const st = (1 - sh) * settings.mPosY;
var sr = sl + sw; const sr = sl + sw;
var sb = st + sh; const sb = st + sh;
var pad = 0.01; const pad = 0.01;
if (settings.mode === 3) { if (settings.mode === 3) {
// Strip // Strip
qr.addBlank(0, st - pad, size, sb + pad); qr.add_blank(0, st - pad, size, sb + pad);
} else { } else {
// Box // Box
qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad); qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
} }
context.drawImage(settings.image, sl * size, st * size, sw * size, sh * size); context.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);
} };
function drawBackground(qr, context, settings) { const draw_background = (qr, context, settings) => {
if (jq(settings.background).is('img')) { if (is_img_el(settings.background)) {
context.drawImage(settings.background, 0, 0, settings.size, settings.size); context.drawImage(settings.background, 0, 0, settings.size, settings.size);
} else if (settings.background) { } else if (settings.background) {
context.fillStyle = settings.background; context.fillStyle = settings.background;
context.fillRect(settings.left, settings.top, settings.size, settings.size); context.fillRect(settings.left, settings.top, settings.size, settings.size);
} }
var mode = settings.mode; const mode = settings.mode;
if (mode === 1 || mode === 2) { if (mode === 1 || mode === 2) {
drawBackgroundLabel(qr, context, settings); draw_background_label(qr, context, settings);
} else if (mode === 3 || mode === 4) { } else if (is_img_el(settings.image) && (mode === 3 || mode === 4)) {
drawBackgroundImage(qr, context, settings); draw_background_img(qr, context, settings);
}
} }
};
function drawModuleDefault(qr, context, settings, left, top, width, row, col) { const draw_modules_default = (qr, context, settings, left, top, width, row, col) => {
if (qr.isDark(row, col)) { if (qr.is_dark(row, col)) {
context.rect(left, top, width, width); context.rect(left, top, width, width);
} }
} };
function drawModuleRoundedDark(ctx, l, t, r, b, rad, nw, ne, se, sw) { const draw_modules_rounded_dark = (ctx, l, t, r, b, rad, nw, ne, se, sw) => {
if (nw) { if (nw) {
ctx.moveTo(l + rad, t); ctx.moveTo(l + rad, t);
} else { } else {
@ -177,9 +174,9 @@
} else { } else {
ctx.lineTo(l, t); ctx.lineTo(l, t);
} }
} };
function drawModuleRoundendLight(ctx, l, t, r, b, rad, nw, ne, se, sw) { const draw_modules_rounded_light = (ctx, l, t, r, b, rad, nw, ne, se, sw) => {
if (nw) { if (nw) {
ctx.moveTo(l + rad, t); ctx.moveTo(l + rad, t);
ctx.lineTo(l, t); ctx.lineTo(l, t);
@ -207,60 +204,60 @@
ctx.lineTo(l, b - rad); ctx.lineTo(l, b - rad);
ctx.arcTo(l, b, l + rad, b, rad); ctx.arcTo(l, b, l + rad, b, rad);
} }
} };
function drawModuleRounded(qr, context, settings, left, top, width, row, col) { const draw_modules_rounded = (qr, context, settings, left, top, width, row, col) => {
var isDark = qr.isDark; const is_dark = qr.is_dark;
var right = left + width; const right = left + width;
var bottom = top + width; const bottom = top + width;
var radius = settings.radius * width; const radius = settings.radius * width;
var rowT = row - 1; const rowT = row - 1;
var rowB = row + 1; const rowB = row + 1;
var colL = col - 1; const colL = col - 1;
var colR = col + 1; const colR = col + 1;
var center = isDark(row, col); const center = is_dark(row, col);
var northwest = isDark(rowT, colL); const northwest = is_dark(rowT, colL);
var north = isDark(rowT, col); const north = is_dark(rowT, col);
var northeast = isDark(rowT, colR); const northeast = is_dark(rowT, colR);
var east = isDark(row, colR); const east = is_dark(row, colR);
var southeast = isDark(rowB, colR); const southeast = is_dark(rowB, colR);
var south = isDark(rowB, col); const south = is_dark(rowB, col);
var southwest = isDark(rowB, colL); const southwest = is_dark(rowB, colL);
var west = isDark(row, colL); const west = is_dark(row, colL);
if (center) { if (center) {
drawModuleRoundedDark(context, left, top, right, bottom, radius, !north && !west, !north && !east, !south && !east, !south && !west); draw_modules_rounded_dark(context, left, top, right, bottom, radius, !north && !west, !north && !east, !south && !east, !south && !west);
} else { } else {
drawModuleRoundendLight(context, left, top, right, bottom, radius, north && west && northwest, north && east && northeast, south && east && southeast, south && west && southwest); draw_modules_rounded_light(context, left, top, right, bottom, radius, north && west && northwest, north && east && northeast, south && east && southeast, south && west && southwest);
}
} }
};
function drawModules(qr, context, settings) { const draw_modules = (qr, context, settings) => {
var moduleCount = qr.moduleCount; const module_count = qr.module_count;
var moduleSize = settings.size / moduleCount; const module_size = settings.size / module_count;
var fn = drawModuleDefault; let fn = draw_modules_default;
var row; let row;
var col; let col;
if (settings.radius > 0 && settings.radius <= 0.5) { if (settings.radius > 0 && settings.radius <= 0.5) {
fn = drawModuleRounded; fn = draw_modules_rounded;
} }
context.beginPath(); context.beginPath();
for (row = 0; row < moduleCount; row += 1) { for (row = 0; row < module_count; row += 1) {
for (col = 0; col < moduleCount; col += 1) { for (col = 0; col < module_count; col += 1) {
var l = settings.left + col * moduleSize; const l = settings.left + col * module_size;
var t = settings.top + row * moduleSize; const t = settings.top + row * module_size;
var w = moduleSize; const w = module_size;
fn(qr, context, settings, l, t, w, row, col); fn(qr, context, settings, l, t, w, row, col);
} }
} }
if (jq(settings.fill).is('img')) { if (is_img_el(settings.fill)) {
context.strokeStyle = 'rgba(0,0,0,0.5)'; context.strokeStyle = 'rgba(0,0,0,0.5)';
context.lineWidth = 2; context.lineWidth = 2;
context.stroke(); context.stroke();
var prev = context.globalCompositeOperation; const prev = context.globalCompositeOperation;
context.globalCompositeOperation = 'destination-out'; context.globalCompositeOperation = 'destination-out';
context.fill(); context.fill();
context.globalCompositeOperation = prev; context.globalCompositeOperation = prev;
@ -272,55 +269,55 @@
context.fillStyle = settings.fill; context.fillStyle = settings.fill;
context.fill(); context.fill();
} }
} };
// Draws QR code to the given `canvas` and returns it. // Draws QR code to the given `canvas` and returns it.
function drawOnCanvas(canvas, settings) { const draw_on_canvas = (canvas, settings) => {
var qr = createMinQRCode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet); const qr = create_min_qrcode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
if (!qr) { if (!qr) {
return null; return null;
} }
var $canvas = jq(canvas).data('qrcode', qr); const $canvas = JQ(canvas).data('qrcode', qr);
var context = $canvas[0].getContext('2d'); const context = $canvas[0].getContext('2d');
drawBackground(qr, context, settings); draw_background(qr, context, settings);
drawModules(qr, context, settings); draw_modules(qr, context, settings);
return $canvas; return $canvas;
} };
// Returns a `canvas` element representing the QR code for the given settings. // Returns a `canvas` element representing the QR code for the given settings.
function createCanvas(settings) { const create_canvas = settings => {
var $canvas = jq('<canvas/>').attr('width', settings.size).attr('height', settings.size); const $canvas = JQ('<canvas/>').attr('width', settings.size).attr('height', settings.size);
return drawOnCanvas($canvas, settings); return draw_on_canvas($canvas, settings);
} };
// Returns an `image` element representing the QR code for the given settings. // Returns an `image` element representing the QR code for the given settings.
function createImage(settings) { const create_img = settings => {
return jq('<img/>').attr('src', createCanvas(settings)[0].toDataURL('image/png')); return JQ('<img/>').attr('src', create_canvas(settings)[0].toDataURL('image/png'));
} };
// Returns a `div` element representing the QR code for the given settings. // Returns a `div` element representing the QR code for the given settings.
function createDiv(settings) { const create_div = settings => {
var qr = createMinQRCode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet); const qr = create_min_qrcode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
if (!qr) { if (!qr) {
return null; return null;
} }
// some shortcuts to improve compression // some shortcuts to improve compression
var settings_size = settings.size; const settings_size = settings.size;
var settings_bgColor = settings.background; const settings_bgColor = settings.background;
var math_floor = Math.floor; const math_floor = Math.floor;
var moduleCount = qr.moduleCount; const module_count = qr.module_count;
var moduleSize = math_floor(settings_size / moduleCount); const module_size = math_floor(settings_size / module_count);
var offset = math_floor(0.5 * (settings_size - moduleSize * moduleCount)); const offset = math_floor(0.5 * (settings_size - module_size * module_count));
var row; let row;
var col; let col;
var containerCSS = { const container_css = {
position: 'relative', position: 'relative',
left: 0, left: 0,
top: 0, top: 0,
@ -329,29 +326,29 @@
width: settings_size, width: settings_size,
height: settings_size height: settings_size
}; };
var darkCSS = { const dark_css = {
position: 'absolute', position: 'absolute',
padding: 0, padding: 0,
margin: 0, margin: 0,
width: moduleSize, width: module_size,
height: moduleSize, height: module_size,
'background-color': settings.fill 'background-color': settings.fill
}; };
var $div = jq('<div/>').data('qrcode', qr).css(containerCSS); const $div = JQ('<div/>').data('qrcode', qr).css(container_css);
if (settings_bgColor) { if (settings_bgColor) {
$div.css('background-color', settings_bgColor); $div.css('background-color', settings_bgColor);
} }
for (row = 0; row < moduleCount; row += 1) { for (row = 0; row < module_count; row += 1) {
for (col = 0; col < moduleCount; col += 1) { for (col = 0; col < module_count; col += 1) {
if (qr.isDark(row, col)) { if (qr.is_dark(row, col)) {
jq('<div/>') JQ('<div/>')
.css(darkCSS) .css(dark_css)
.css({ .css({
left: offset + col * moduleSize, left: offset + col * module_size,
top: offset + row * moduleSize top: offset + row * module_size
}) })
.appendTo($div); .appendTo($div);
} }
@ -359,24 +356,19 @@
} }
return $div; return $div;
} };
function createHTML(settings) { const create_html = settings => {
if (hasCanvas && settings.render === 'canvas') { if (HAS_CANVAS && settings.render === 'canvas') {
return createCanvas(settings); return create_canvas(settings);
} else if (hasCanvas && settings.render === 'image') { } else if (HAS_CANVAS && settings.render === 'image') {
return createImage(settings); return create_img(settings);
} }
return createDiv(settings); return create_div(settings);
} };
// Plugin
// ======
// Default settings const DEFAULTS = {
// ----------------
var defaults = {
// render method: `'canvas'`, `'image'` or `'div'` // render method: `'canvas'`, `'image'` or `'div'`
render: 'canvas', render: 'canvas',
@ -398,7 +390,7 @@
fill: '#000', fill: '#000',
// background color or image element, `null` for transparent background // background color or image element, `null` for transparent background
background: null, background: '#fff',
// content // content
text: 'no text', text: 'no text',
@ -426,24 +418,16 @@
fontcolor: '#000', fontcolor: '#000',
image: null image: null
}; };
// Register the plugin JQ.fn.qrcode = module.exports = function main(options) {
// ------------------- const settings = JQ.extend({}, DEFAULTS, options);
jq.fn.qrcode = function (options) {
var settings = jq.extend({}, defaults, options);
return this.each(function (idx, el) { return this.each((idx, el) => {
if (el.nodeName.toLowerCase() === 'canvas') { if (el.nodeName.toLowerCase() === 'canvas') {
drawOnCanvas(el, settings); draw_on_canvas(el, settings);
} else { } else {
jq(el).append(createHTML(settings)); JQ(el).append(create_html(settings));
} }
}); });
}; };
}(function () {
// `qrcode` is the single public function defined by the `QR Code Generator`
// @include "../vendor/qrcode.js"
// @include "../vendor/qrcode_UTF8.js"
return qrcode; // eslint-disable-line no-undef
}()));

2
src/vqrcode.js
Unescape Escape View File

@ -0,0 +1,2 @@
// @include "../vendor/qrcode.js"
// @include "../vendor/qrcode_UTF8.js"
Write Preview
Loading…
Cancel
Save