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.18.0
Lars Jung 5 years ago
parent bf58382a98
commit 631df8abac
10 changed files with 2321 additions and 3109 deletions
Show Stats Download Patch File Download Diff File

2
.editorconfig
Unescape Escape View File

@ -12,7 +12,7 @@ insert_final_newline = true
trim_trailing_whitespace = true trim_trailing_whitespace = true
[{package.json,.eslintrc,.babelrc,.travis.yml}] [{*.json,*.yml}]
indent_size = 2 indent_size = 2

2
.eslintrc → .eslintrc.yml
Unescape Escape View File

@ -6,7 +6,7 @@
node: true node: true
parserOptions: parserOptions:
ecmaVersion: 2019 ecmaVersion: 2020
rules: rules:
array-bracket-spacing: [2, never] array-bracket-spacing: [2, never]

4
README.md
Unescape Escape View File

@ -3,14 +3,14 @@
[![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 There is a newer lib named [kjua][kjua] that works in all modern browsers
with crisp codes on all devices. with crisp codes on all devices.
## License ## License
The MIT License (MIT) The MIT License (MIT)
Copyright (c) 2019 Lars Jung (https://larsjung.de) Copyright (c) 2020 Lars Jung (https://larsjung.de)
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

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

@ -1,4 +1,4 @@
/*! jquery-qrcode v0.17.0 - https://larsjung.de/jquery-qrcode/ */ /*! jquery-qrcode v0.18.0 - https://larsjung.de/jquery-qrcode/ */
(function webpackUniversalModuleDefinition(root, factory) { (function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object') if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(); module.exports = factory();
@ -99,13 +99,9 @@ return /******/ (function(modules) { // webpackBootstrap
/* 0 */ /* 0 */
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(global) {var WIN = global.window; var WIN = window; // eslint-disable-line
var JQ = WIN.jQuery; // Check if canvas is available in the browser (as Modernizr does)
var HAS_CANVAS = function () { var JQ = WIN.jQuery;
var el = WIN.document.createElement('canvas');
return !!(el.getContext && el.getContext('2d'));
}();
var is_img_el = function is_img_el(x) { var is_img_el = function is_img_el(x) {
return x && typeof x.tagName === 'string' && x.tagName.toUpperCase() === 'IMG'; return x && typeof x.tagName === 'string' && x.tagName.toUpperCase() === 'IMG';
@ -115,7 +111,7 @@ var is_img_el = function is_img_el(x) {
var create_qrcode = function create_qrcode(text, level, version, quiet) { var create_qrcode = function create_qrcode(text, level, version, quiet) {
var qr = {}; var qr = {};
var qr_gen = __webpack_require__(2); var qr_gen = __webpack_require__(1);
qr_gen.stringToBytes = qr_gen.stringToBytesFuncs['UTF-8']; qr_gen.stringToBytes = qr_gen.stringToBytesFuncs['UTF-8'];
var vqr = qr_gen(version, level); var vqr = qr_gen(version, level);
@ -170,12 +166,12 @@ var create_min_qrcode = function create_min_qrcode(text, level, min_ver, max_ver
return undefined; return undefined;
}; };
var draw_background_label = function draw_background_label(qr, context, settings) { var draw_background_label = function draw_background_label(qr, ctx, 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 tmp_ctx = JQ('<canvas/>')[0].getContext('2d');
ctx.font = font; tmp_ctx.font = font;
var w = ctx.measureText(settings.label).width; var w = tmp_ctx.measureText(settings.label).width;
var sh = settings.mSize; var sh = settings.mSize;
var sw = w / size; var sw = w / size;
var sl = (1 - sw) * settings.mPosX; var sl = (1 - sw) * settings.mPosX;
@ -192,12 +188,12 @@ var draw_background_label = function draw_background_label(qr, context, settings
qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad); qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
} }
context.fillStyle = settings.fontcolor; ctx.fillStyle = settings.fontcolor;
context.font = font; ctx.font = font;
context.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size); ctx.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size);
}; };
var draw_background_img = function draw_background_img(qr, context, settings) { var draw_background_img = function draw_background_img(qr, ctx, 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;
@ -217,160 +213,160 @@ var draw_background_img = function draw_background_img(qr, context, settings) {
qr.add_blank(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); ctx.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);
}; };
var draw_background = function draw_background(qr, context, settings) { var draw_background = function draw_background(qr, ctx, settings) {
if (is_img_el(settings.background)) { if (is_img_el(settings.background)) {
context.drawImage(settings.background, 0, 0, settings.size, settings.size); ctx.drawImage(settings.background, 0, 0, settings.size, settings.size);
} else if (settings.background) { } else if (settings.background) {
context.fillStyle = settings.background; ctx.fillStyle = settings.background;
context.fillRect(settings.left, settings.top, settings.size, settings.size); ctx.fillRect(settings.left, settings.top, settings.size, settings.size);
} }
var mode = settings.mode; var mode = settings.mode;
if (mode === 1 || mode === 2) { if (mode === 1 || mode === 2) {
draw_background_label(qr, context, settings); draw_background_label(qr, ctx, settings);
} else if (is_img_el(settings.image) && (mode === 3 || mode === 4)) { } else if (is_img_el(settings.image) && (mode === 3 || mode === 4)) {
draw_background_img(qr, context, settings); draw_background_img(qr, ctx, settings);
} }
}; };
var draw_modules_default = function draw_modules_default(qr, context, settings, left, top, width, row, col) { var draw_modules_default = function draw_modules_default(qr, ctx, settings, left, top, width, row, col) {
if (qr.is_dark(row, col)) { if (qr.is_dark(row, col)) {
context.rect(left, top, width, width); ctx.r(left, top, width, width);
} }
}; };
var draw_modules_rounded_dark = function draw_modules_rounded_dark(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.m(l + rad, t);
} else { } else {
ctx.moveTo(l, t); ctx.m(l, t);
} }
if (ne) { if (ne) {
ctx.lineTo(r - rad, t); ctx.l(r - rad, t).a(r, t, r, b, rad);
ctx.arcTo(r, t, r, b, rad);
} else { } else {
ctx.lineTo(r, t); ctx.l(r, t);
} }
if (se) { if (se) {
ctx.lineTo(r, b - rad); ctx.l(r, b - rad).a(r, b, l, b, rad);
ctx.arcTo(r, b, l, b, rad);
} else { } else {
ctx.lineTo(r, b); ctx.l(r, b);
} }
if (sw) { if (sw) {
ctx.lineTo(l + rad, b); ctx.l(l + rad, b).a(l, b, l, t, rad);
ctx.arcTo(l, b, l, t, rad);
} else { } else {
ctx.lineTo(l, b); ctx.l(l, b);
} }
if (nw) { if (nw) {
ctx.lineTo(l, t + rad); ctx.l(l, t + rad).a(l, t, r, t, rad);
ctx.arcTo(l, t, r, t, rad);
} else { } else {
ctx.lineTo(l, t); ctx.l(l, t);
} }
}; };
var draw_modules_rounded_light = function draw_modules_rounded_light(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.m(l + rad, t).l(l, t).l(l, t + rad).a(l, t, l + rad, t, rad);
ctx.lineTo(l, t);
ctx.lineTo(l, t + rad);
ctx.arcTo(l, t, l + rad, t, rad);
} }
if (ne) { if (ne) {
ctx.moveTo(r - rad, t); ctx.m(r - rad, t).l(r, t).l(r, t + rad).a(r, t, r - rad, t, rad);
ctx.lineTo(r, t);
ctx.lineTo(r, t + rad);
ctx.arcTo(r, t, r - rad, t, rad);
} }
if (se) { if (se) {
ctx.moveTo(r - rad, b); ctx.m(r - rad, b).l(r, b).l(r, b - rad).a(r, b, r - rad, b, rad);
ctx.lineTo(r, b);
ctx.lineTo(r, b - rad);
ctx.arcTo(r, b, r - rad, b, rad);
} }
if (sw) { if (sw) {
ctx.moveTo(l + rad, b); ctx.m(l + rad, b).l(l, b).l(l, b - rad).a(l, b, l + rad, b, rad);
ctx.lineTo(l, b);
ctx.lineTo(l, b - rad);
ctx.arcTo(l, b, l + rad, b, rad);
} }
}; };
var draw_modules_rounded = function draw_modules_rounded(qr, context, settings, left, top, width, row, col) { var draw_modules_rounded = function draw_modules_rounded(qr, ctx, settings, left, top, width, row, col) {
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 rad = settings.radius * width;
var rowT = row - 1; var row_n = row - 1;
var rowB = row + 1; var row_s = row + 1;
var colL = col - 1; var col_w = col - 1;
var colR = col + 1; var col_e = col + 1;
var center = is_dark(row, col); var is_dark = qr.is_dark;
var northwest = is_dark(rowT, colL); var d_center = is_dark(row, col);
var north = is_dark(rowT, col); var d_nw = is_dark(row_n, col_w);
var northeast = is_dark(rowT, colR); var d_n = is_dark(row_n, col);
var east = is_dark(row, colR); var d_ne = is_dark(row_n, col_e);
var southeast = is_dark(rowB, colR); var d_e = is_dark(row, col_e);
var south = is_dark(rowB, col); var d_se = is_dark(row_s, col_e);
var southwest = is_dark(rowB, colL); var d_s = is_dark(row_s, col);
var west = is_dark(row, colL); var d_sw = is_dark(row_s, col_w);
var d_w = is_dark(row, col_w);
if (center) {
draw_modules_rounded_dark(context, left, top, right, bottom, radius, !north && !west, !north && !east, !south && !east, !south && !west); if (d_center) {
draw_modules_rounded_dark(ctx, left, top, right, bottom, rad, !d_n && !d_w, !d_n && !d_e, !d_s && !d_e, !d_s && !d_w);
} else { } else {
draw_modules_rounded_light(context, left, top, right, bottom, radius, north && west && northwest, north && east && northeast, south && east && southeast, south && west && southwest); draw_modules_rounded_light(ctx, left, top, right, bottom, rad, d_n && d_w && d_nw, d_n && d_e && d_ne, d_s && d_e && d_se, d_s && d_w && d_sw);
} }
}; };
var draw_modules = function draw_modules(qr, context, settings) { var draw_modules = function draw_modules(qr, ctx, settings) {
var module_count = qr.module_count; var module_count = qr.module_count;
var module_size = settings.size / module_count; var module_size = settings.size / module_count;
var fn = draw_modules_default; var fn = draw_modules_default;
var row;
var col;
if (settings.radius > 0 && settings.radius <= 0.5) { if (settings.radius > 0 && settings.radius <= 0.5) {
fn = draw_modules_rounded; fn = draw_modules_rounded;
} }
context.beginPath(); var draw_ctx = {
m: function m(x, y) {
for (row = 0; row < module_count; row += 1) { ctx.moveTo(x, y);
for (col = 0; col < module_count; col += 1) { return draw_ctx;
},
l: function l(x, y) {
ctx.lineTo(x, y);
return draw_ctx;
},
a: function a() {
ctx.arcTo.apply(ctx, arguments);
return draw_ctx;
},
r: function r() {
ctx.rect.apply(ctx, arguments);
return draw_ctx;
}
};
ctx.beginPath();
for (var row = 0; row < module_count; row += 1) {
for (var col = 0; col < module_count; col += 1) {
var l = settings.left + col * module_size; var l = settings.left + col * module_size;
var t = settings.top + row * module_size; var t = settings.top + row * module_size;
var w = module_size; var w = module_size;
fn(qr, context, settings, l, t, w, row, col); fn(qr, draw_ctx, settings, l, t, w, row, col);
} }
} }
if (is_img_el(settings.fill)) { if (is_img_el(settings.fill)) {
context.strokeStyle = 'rgba(0,0,0,0.5)'; ctx.strokeStyle = 'rgba(0,0,0,0.5)';
context.lineWidth = 2; ctx.lineWidth = 2;
context.stroke(); ctx.stroke();
var prev = context.globalCompositeOperation; var prev = ctx.globalCompositeOperation;
context.globalCompositeOperation = 'destination-out'; ctx.globalCompositeOperation = 'destination-out';
context.fill(); ctx.fill();
context.globalCompositeOperation = prev; ctx.globalCompositeOperation = prev;
context.clip(); ctx.clip();
context.drawImage(settings.fill, 0, 0, settings.size, settings.size); ctx.drawImage(settings.fill, 0, 0, settings.size, settings.size);
context.restore(); ctx.restore();
} else { } else {
context.fillStyle = settings.fill; ctx.fillStyle = settings.fill;
context.fill(); ctx.fill();
} }
}; // Draws QR code to the given `canvas` and returns it. }; // Draws QR code to the given `canvas` and returns it.
@ -383,9 +379,9 @@ var draw_on_canvas = function draw_on_canvas(canvas, settings) {
} }
var $canvas = JQ(canvas).data('qrcode', qr); var $canvas = JQ(canvas).data('qrcode', qr);
var context = $canvas[0].getContext('2d'); var ctx = $canvas[0].getContext('2d');
draw_background(qr, context, settings); draw_background(qr, ctx, settings);
draw_modules(qr, context, settings); draw_modules(qr, ctx, 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.
@ -415,8 +411,6 @@ var create_div = function create_div(settings) {
var module_count = qr.module_count; var module_count = qr.module_count;
var module_size = math_floor(settings_size / module_count); var module_size = math_floor(settings_size / module_count);
var offset = math_floor(0.5 * (settings_size - module_size * module_count)); var offset = math_floor(0.5 * (settings_size - module_size * module_count));
var row;
var col;
var container_css = { var container_css = {
position: 'relative', position: 'relative',
left: 0, left: 0,
@ -440,8 +434,8 @@ var create_div = function create_div(settings) {
$div.css('background-color', settings_bgColor); $div.css('background-color', settings_bgColor);
} }
for (row = 0; row < module_count; row += 1) { for (var row = 0; row < module_count; row += 1) {
for (col = 0; col < module_count; col += 1) { for (var col = 0; col < module_count; col += 1) {
if (qr.is_dark(row, col)) { if (qr.is_dark(row, col)) {
JQ('<div/>').css(dark_css).css({ JQ('<div/>').css(dark_css).css({
left: offset + col * module_size, left: offset + col * module_size,
@ -455,9 +449,9 @@ var create_div = function create_div(settings) {
}; };
var create_html = function create_html(settings) { var create_html = function create_html(settings) {
if (HAS_CANVAS && settings.render === 'canvas') { if (settings.render === 'canvas') {
return create_canvas(settings); return create_canvas(settings);
} else if (HAS_CANVAS && settings.render === 'image') { } else if (settings.render === 'image') {
return create_img(settings); return create_img(settings);
} }
@ -513,36 +507,9 @@ JQ.fn.qrcode = module.exports = function main(options) {
} }
}); });
}; };
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
/***/ }), /***/ }),
/* 1 */ /* 1 */
/***/ (function(module, exports) {
var g;
// This works in non-strict mode
g = (function() {
return this;
})();
try {
// This works if eval is allowed (see CSP)
g = g || new Function("return this")();
} catch (e) {
// This works if the window reference is available
if (typeof window === "object") g = window;
}
// g can still be undefined, but nothing to do about it...
// We return undefined, instead of nothing here, so it's
// easier to handle this case. if(!global) { ...}
module.exports = g;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;//--------------------------------------------------------------------- var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;//---------------------------------------------------------------------
@ -1039,7 +1006,7 @@ var qrcode = function() {
return qrHtml; return qrHtml;
}; };
_this.createSvgTag = function(cellSize, margin) { _this.createSvgTag = function(cellSize, margin, alt, title) {
var opts = {}; var opts = {};
if (typeof arguments[0] == 'object') { if (typeof arguments[0] == 'object') {
@ -1048,10 +1015,23 @@ var qrcode = function() {
// overwrite cellSize and margin. // overwrite cellSize and margin.
cellSize = opts.cellSize; cellSize = opts.cellSize;
margin = opts.margin; margin = opts.margin;
alt = opts.alt;
title = opts.title;
} }
cellSize = cellSize || 2; cellSize = cellSize || 2;
margin = (typeof margin == 'undefined')? cellSize * 4 : margin; margin = (typeof margin == 'undefined')? cellSize * 4 : margin;
// Compose alt property surrogate
alt = (typeof alt === 'string') ? {text: alt} : alt || {};
alt.text = alt.text || null;
alt.id = (alt.text) ? alt.id || 'qrcode-description' : null;
// Compose title property surrogate
title = (typeof title === 'string') ? {text: title} : title || {};
title.text = title.text || null;
title.id = (title.text) ? title.id || 'qrcode-title' : null;
var size = _this.getModuleCount() * cellSize + margin * 2; var size = _this.getModuleCount() * cellSize + margin * 2;
var c, mc, r, mr, qrSvg='', rect; var c, mc, r, mr, qrSvg='', rect;
@ -1061,7 +1041,14 @@ var qrcode = function() {
qrSvg += '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"'; qrSvg += '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"';
qrSvg += !opts.scalable ? ' width="' + size + 'px" height="' + size + 'px"' : ''; qrSvg += !opts.scalable ? ' width="' + size + 'px" height="' + size + 'px"' : '';
qrSvg += ' viewBox="0 0 ' + size + ' ' + size + '" '; qrSvg += ' viewBox="0 0 ' + size + ' ' + size + '" ';
qrSvg += ' preserveAspectRatio="xMinYMin meet">'; qrSvg += ' preserveAspectRatio="xMinYMin meet"';
qrSvg += (title.text || alt.text) ? ' role="img" aria-labelledby="' +
escapeXml([title.id, alt.id].join(' ').trim() ) + '"' : '';
qrSvg += '>';
qrSvg += (title.text) ? '<title id="' + escapeXml(title.id) + '">' +
escapeXml(title.text) + '</title>' : '';
qrSvg += (alt.text) ? '<description id="' + escapeXml(alt.id) + '">' +
escapeXml(alt.text) + '</description>' : '';
qrSvg += '<rect width="100%" height="100%" fill="white" cx="0" cy="0"/>'; qrSvg += '<rect width="100%" height="100%" fill="white" cx="0" cy="0"/>';
qrSvg += '<path d="'; qrSvg += '<path d="';
@ -1121,7 +1108,7 @@ var qrcode = function() {
img += '"'; img += '"';
if (alt) { if (alt) {
img += '\u0020alt="'; img += '\u0020alt="';
img += alt; img += escapeXml(alt);
img += '"'; img += '"';
} }
img += '/>'; img += '/>';
@ -1129,6 +1116,21 @@ var qrcode = function() {
return img; return img;
}; };
var escapeXml = function(s) {
var escaped = '';
for (var i = 0; i < s.length; i += 1) {
var c = s.charAt(i);
switch(c) {
case '<': escaped += '&lt;'; break;
case '>': escaped += '&gt;'; break;
case '&': escaped += '&amp;'; break;
case '"': escaped += '&quot;'; break;
default : escaped += c; break;
}
}
return escaped;
};
var _createHalfASCII = function(margin) { var _createHalfASCII = function(margin) {
var cellSize = 1; var cellSize = 1;
margin = (typeof margin == 'undefined')? cellSize * 2 : margin; margin = (typeof margin == 'undefined')? cellSize * 2 : margin;

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

File diff suppressed because one or more lines are too long

4978
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
package.json
Unescape Escape View File

@ -1,10 +1,9 @@
{ {
"name": "jquery-qrcode", "name": "jquery-qrcode",
"title": "jQuery.qrcode", "title": "jQuery.qrcode",
"version": "0.17.0", "version": "0.18.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",
"author": "Lars Jung <lrsjng@gmail.com> (https://larsjung.de)", "author": "Lars Jung <lrsjng@gmail.com> (https://larsjung.de)",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
@ -17,14 +16,11 @@
"url": "https://github.com/lrsjng/jquery-qrcode.git" "url": "https://github.com/lrsjng/jquery-qrcode.git"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "7.4.4", "@babel/core": "7.10.5",
"@babel/preset-env": "7.4.4", "@babel/preset-env": "7.10.4",
"eslint": "5.16.0", "eslint": "7.5.0",
"ghu": "0.20.0", "ghu": "0.26.0",
"jquery": "3.4.0", "jquery": "3.5.1",
"qrcode-generator": "1.4.3" "qrcode-generator": "1.4.4"
},
"engines": {
"node": ">=8.0.0"
} }
} }

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

@ -2,12 +2,11 @@ doctype html
html(lang='en') html(lang='en')
head head
meta(charset='utf-8') meta(charset='utf-8')
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(href='styles.css', rel='stylesheet') link(href='styles.css', rel='stylesheet')
link(href='//fonts.googleapis.com/css?family=Ubuntu:300,400,700', rel='stylesheet') link(href='//fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap' 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')
@ -70,7 +69,7 @@ html(lang='en')
label(for='label') LABEL label(for='label') LABEL
input#label(type='text', value=pkg.title) input#label(type='text', value=pkg.title)
label(for='font') FONT NAME label(for='font') FONT NAME
input#font(type='text', value='Ubuntu') input#font(type='text', value='Ubuntu Mono')
label(for='fontcolor') FONT COLOR label(for='fontcolor') FONT COLOR
input#fontcolor(type='color', value='#ff9818') input#fontcolor(type='color', value='#ff9818')

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

@ -1,7 +1,10 @@
body { * {
font-family: 'Ubuntu', 'sans';
margin: 0; margin: 0;
padding: 0; padding: 0;
}
body {
font-family: 'Ubuntu Mono', 'monospace';
text-align: center; text-align: center;
background: repeat url('back.png'); background: repeat url('back.png');
} }
@ -22,6 +25,7 @@ body {
display: inline-block; display: inline-block;
margin: 20px auto; margin: 20px auto;
box-shadow: 0 0 16px rgba(0,0,0,0.5); box-shadow: 0 0 16px rgba(0,0,0,0.5);
-webkit-print-color-adjust: exact;
} }
#container > * { #container > * {
@ -55,13 +59,14 @@ hr {
} }
label { label {
font-size: 10px; display: block;
color: #aaa; font-size: 12px;
padding: 12px 4px 0 4px; color: #555;
padding: 12px 4px 4px 4px;
} }
input, textarea, select { input, textarea, select {
font-family: 'Ubuntu', 'sans'; font-family: 'Ubuntu Mono', 'monospace';
display: block; display: block;
background-color: #fff; background-color: #fff;
margin: 2px; margin: 2px;
@ -91,3 +96,13 @@ input::-webkit-slider-thumb {
border-radius: 3px; border-radius: 3px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(1, #aaa)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(1, #aaa));
} }
@media print {
#container {
box-shadow: none;
}
.control {
display: none;
}
}

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

@ -1,12 +1,6 @@
const WIN = global.window; const WIN = window; // eslint-disable-line
const JQ = WIN.jQuery; const JQ = WIN.jQuery;
// Check if canvas is available in the browser (as Modernizr does)
const HAS_CANVAS = (() => {
const el = WIN.document.createElement('canvas');
return !!(el.getContext && el.getContext('2d'));
})();
const is_img_el = x => x && typeof x.tagName === 'string' && x.tagName.toUpperCase() === 'IMG'; const is_img_el = x => x && typeof x.tagName === 'string' && x.tagName.toUpperCase() === 'IMG';
// Wrapper for the original QR code generator. // Wrapper for the original QR code generator.
@ -66,14 +60,14 @@ const create_min_qrcode = (text, level, min_ver, max_ver, quiet) => {
return undefined; return undefined;
}; };
const draw_background_label = (qr, context, settings) => { const draw_background_label = (qr, ctx, settings) => {
const size = settings.size; const size = settings.size;
const font = 'bold ' + settings.mSize * size + 'px ' + settings.fontname; const font = 'bold ' + settings.mSize * size + 'px ' + settings.fontname;
const ctx = JQ('<canvas/>')[0].getContext('2d'); const tmp_ctx = JQ('<canvas/>')[0].getContext('2d');
ctx.font = font; tmp_ctx.font = font;
const w = ctx.measureText(settings.label).width; const w = tmp_ctx.measureText(settings.label).width;
const sh = settings.mSize; const sh = settings.mSize;
const sw = w / size; const sw = w / size;
const sl = (1 - sw) * settings.mPosX; const sl = (1 - sw) * settings.mPosX;
@ -90,12 +84,12 @@ const draw_background_label = (qr, context, settings) => {
qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad); qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
} }
context.fillStyle = settings.fontcolor; ctx.fillStyle = settings.fontcolor;
context.font = font; ctx.font = font;
context.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size); ctx.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size);
}; };
const draw_background_img = (qr, context, settings) => { const draw_background_img = (qr, ctx, settings) => {
const size = settings.size; const size = settings.size;
const w = settings.image.naturalWidth || 1; const w = settings.image.naturalWidth || 1;
const h = settings.image.naturalHeight || 1; const h = settings.image.naturalHeight || 1;
@ -115,159 +109,150 @@ const draw_background_img = (qr, context, settings) => {
qr.add_blank(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); ctx.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);
}; };
const draw_background = (qr, context, settings) => { const draw_background = (qr, ctx, settings) => {
if (is_img_el(settings.background)) { if (is_img_el(settings.background)) {
context.drawImage(settings.background, 0, 0, settings.size, settings.size); ctx.drawImage(settings.background, 0, 0, settings.size, settings.size);
} else if (settings.background) { } else if (settings.background) {
context.fillStyle = settings.background; ctx.fillStyle = settings.background;
context.fillRect(settings.left, settings.top, settings.size, settings.size); ctx.fillRect(settings.left, settings.top, settings.size, settings.size);
} }
const mode = settings.mode; const mode = settings.mode;
if (mode === 1 || mode === 2) { if (mode === 1 || mode === 2) {
draw_background_label(qr, context, settings); draw_background_label(qr, ctx, settings);
} else if (is_img_el(settings.image) && (mode === 3 || mode === 4)) { } else if (is_img_el(settings.image) && (mode === 3 || mode === 4)) {
draw_background_img(qr, context, settings); draw_background_img(qr, ctx, settings);
} }
}; };
const draw_modules_default = (qr, context, settings, left, top, width, row, col) => { const draw_modules_default = (qr, ctx, settings, left, top, width, row, col) => {
if (qr.is_dark(row, col)) { if (qr.is_dark(row, col)) {
context.rect(left, top, width, width); ctx.r(left, top, width, width);
} }
}; };
const draw_modules_rounded_dark = (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.m(l + rad, t);
} else { } else {
ctx.moveTo(l, t); ctx.m(l, t);
} }
if (ne) { if (ne) {
ctx.lineTo(r - rad, t); ctx.l(r - rad, t).a(r, t, r, b, rad);
ctx.arcTo(r, t, r, b, rad);
} else { } else {
ctx.lineTo(r, t); ctx.l(r, t);
} }
if (se) { if (se) {
ctx.lineTo(r, b - rad); ctx.l(r, b - rad).a(r, b, l, b, rad);
ctx.arcTo(r, b, l, b, rad);
} else { } else {
ctx.lineTo(r, b); ctx.l(r, b);
} }
if (sw) { if (sw) {
ctx.lineTo(l + rad, b); ctx.l(l + rad, b).a(l, b, l, t, rad);
ctx.arcTo(l, b, l, t, rad);
} else { } else {
ctx.lineTo(l, b); ctx.l(l, b);
} }
if (nw) { if (nw) {
ctx.lineTo(l, t + rad); ctx.l(l, t + rad).a(l, t, r, t, rad);
ctx.arcTo(l, t, r, t, rad);
} else { } else {
ctx.lineTo(l, t); ctx.l(l, t);
} }
}; };
const draw_modules_rounded_light = (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.m(l + rad, t).l(l, t).l(l, t + rad).a(l, t, l + rad, t, rad);
ctx.lineTo(l, t);
ctx.lineTo(l, t + rad);
ctx.arcTo(l, t, l + rad, t, rad);
} }
if (ne) { if (ne) {
ctx.moveTo(r - rad, t); ctx.m(r - rad, t).l(r, t).l(r, t + rad).a(r, t, r - rad, t, rad);
ctx.lineTo(r, t);
ctx.lineTo(r, t + rad);
ctx.arcTo(r, t, r - rad, t, rad);
} }
if (se) { if (se) {
ctx.moveTo(r - rad, b); ctx.m(r - rad, b).l(r, b).l(r, b - rad).a(r, b, r - rad, b, rad);
ctx.lineTo(r, b);
ctx.lineTo(r, b - rad);
ctx.arcTo(r, b, r - rad, b, rad);
} }
if (sw) { if (sw) {
ctx.moveTo(l + rad, b); ctx.m(l + rad, b).l(l, b).l(l, b - rad).a(l, b, l + rad, b, rad);
ctx.lineTo(l, b);
ctx.lineTo(l, b - rad);
ctx.arcTo(l, b, l + rad, b, rad);
} }
}; };
const draw_modules_rounded = (qr, context, settings, left, top, width, row, col) => { const draw_modules_rounded = (qr, ctx, settings, left, top, width, row, col) => {
const is_dark = qr.is_dark;
const right = left + width; const right = left + width;
const bottom = top + width; const bottom = top + width;
const radius = settings.radius * width; const rad = settings.radius * width;
const rowT = row - 1;
const rowB = row + 1; const row_n = row - 1;
const colL = col - 1; const row_s = row + 1;
const colR = col + 1; const col_w = col - 1;
const center = is_dark(row, col); const col_e = col + 1;
const northwest = is_dark(rowT, colL);
const north = is_dark(rowT, col); const is_dark = qr.is_dark;
const northeast = is_dark(rowT, colR); const d_center = is_dark(row, col);
const east = is_dark(row, colR); const d_nw = is_dark(row_n, col_w);
const southeast = is_dark(rowB, colR); const d_n = is_dark(row_n, col);
const south = is_dark(rowB, col); const d_ne = is_dark(row_n, col_e);
const southwest = is_dark(rowB, colL); const d_e = is_dark(row, col_e);
const west = is_dark(row, colL); const d_se = is_dark(row_s, col_e);
const d_s = is_dark(row_s, col);
if (center) { const d_sw = is_dark(row_s, col_w);
draw_modules_rounded_dark(context, left, top, right, bottom, radius, !north && !west, !north && !east, !south && !east, !south && !west); const d_w = is_dark(row, col_w);
if (d_center) {
draw_modules_rounded_dark(ctx, left, top, right, bottom, rad, !d_n && !d_w, !d_n && !d_e, !d_s && !d_e, !d_s && !d_w);
} else { } else {
draw_modules_rounded_light(context, left, top, right, bottom, radius, north && west && northwest, north && east && northeast, south && east && southeast, south && west && southwest); draw_modules_rounded_light(ctx, left, top, right, bottom, rad, d_n && d_w && d_nw, d_n && d_e && d_ne, d_s && d_e && d_se, d_s && d_w && d_sw);
} }
}; };
const draw_modules = (qr, context, settings) => { const draw_modules = (qr, ctx, settings) => {
const module_count = qr.module_count; const module_count = qr.module_count;
const module_size = settings.size / module_count; const module_size = settings.size / module_count;
let fn = draw_modules_default;
let row;
let col;
let fn = draw_modules_default;
if (settings.radius > 0 && settings.radius <= 0.5) { if (settings.radius > 0 && settings.radius <= 0.5) {
fn = draw_modules_rounded; fn = draw_modules_rounded;
} }
context.beginPath(); const draw_ctx = {
for (row = 0; row < module_count; row += 1) { m(x, y) {ctx.moveTo(x, y); return draw_ctx;},
for (col = 0; col < module_count; col += 1) { l(x, y) {ctx.lineTo(x, y); return draw_ctx;},
a(...args) {ctx.arcTo(...args); return draw_ctx;},
r(...args) {ctx.rect(...args); return draw_ctx;}
};
ctx.beginPath();
for (let row = 0; row < module_count; row += 1) {
for (let col = 0; col < module_count; col += 1) {
const l = settings.left + col * module_size; const l = settings.left + col * module_size;
const t = settings.top + row * module_size; const t = settings.top + row * module_size;
const w = module_size; const w = module_size;
fn(qr, context, settings, l, t, w, row, col); fn(qr, draw_ctx, settings, l, t, w, row, col);
} }
} }
if (is_img_el(settings.fill)) { if (is_img_el(settings.fill)) {
context.strokeStyle = 'rgba(0,0,0,0.5)'; ctx.strokeStyle = 'rgba(0,0,0,0.5)';
context.lineWidth = 2; ctx.lineWidth = 2;
context.stroke(); ctx.stroke();
const prev = context.globalCompositeOperation; const prev = ctx.globalCompositeOperation;
context.globalCompositeOperation = 'destination-out'; ctx.globalCompositeOperation = 'destination-out';
context.fill(); ctx.fill();
context.globalCompositeOperation = prev; ctx.globalCompositeOperation = prev;
context.clip(); ctx.clip();
context.drawImage(settings.fill, 0, 0, settings.size, settings.size); ctx.drawImage(settings.fill, 0, 0, settings.size, settings.size);
context.restore(); ctx.restore();
} else { } else {
context.fillStyle = settings.fill; ctx.fillStyle = settings.fill;
context.fill(); ctx.fill();
} }
}; };
@ -279,10 +264,10 @@ const draw_on_canvas = (canvas, settings) => {
} }
const $canvas = JQ(canvas).data('qrcode', qr); const $canvas = JQ(canvas).data('qrcode', qr);
const context = $canvas[0].getContext('2d'); const ctx = $canvas[0].getContext('2d');
draw_background(qr, context, settings); draw_background(qr, ctx, settings);
draw_modules(qr, context, settings); draw_modules(qr, ctx, settings);
return $canvas; return $canvas;
}; };
@ -314,9 +299,6 @@ const create_div = settings => {
const module_size = math_floor(settings_size / module_count); const module_size = math_floor(settings_size / module_count);
const offset = math_floor(0.5 * (settings_size - module_size * module_count)); const offset = math_floor(0.5 * (settings_size - module_size * module_count));
let row;
let col;
const container_css = { const container_css = {
position: 'relative', position: 'relative',
left: 0, left: 0,
@ -341,8 +323,8 @@ const create_div = settings => {
$div.css('background-color', settings_bgColor); $div.css('background-color', settings_bgColor);
} }
for (row = 0; row < module_count; row += 1) { for (let row = 0; row < module_count; row += 1) {
for (col = 0; col < module_count; col += 1) { for (let col = 0; col < module_count; col += 1) {
if (qr.is_dark(row, col)) { if (qr.is_dark(row, col)) {
JQ('<div/>') JQ('<div/>')
.css(dark_css) .css(dark_css)
@ -359,9 +341,9 @@ const create_div = settings => {
}; };
const create_html = settings => { const create_html = settings => {
if (HAS_CANVAS && settings.render === 'canvas') { if (settings.render === 'canvas') {
return create_canvas(settings); return create_canvas(settings);
} else if (HAS_CANVAS && settings.render === 'image') { } else if (settings.render === 'image') {
return create_img(settings); return create_img(settings);
} }

Write Preview
Loading…
Cancel
Save