Lars Jung
6 years ago
parent
ac0af48d8e
commit
86948f725f
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -1,9 +0,0 @@
|
||||
---
|
||||
env:
|
||||
browser: true
|
||||
|
||||
rules:
|
||||
func-names: 0
|
||||
no-var: 0
|
||||
prefer-arrow-callback: 0
|
||||
strict: 0
|
||||
@ -1,84 +1,86 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var jq = window.jQuery;
|
||||
var guiValuePairs = [
|
||||
['size', 'px'],
|
||||
['minversion', ''],
|
||||
['quiet', ' modules'],
|
||||
['radius', '%'],
|
||||
['msize', '%'],
|
||||
['mposx', '%'],
|
||||
['mposy', '%']
|
||||
];
|
||||
|
||||
function updateGui() {
|
||||
jq.each(guiValuePairs, function (idx, pair) {
|
||||
var $label = jq('label[for="' + pair[0] + '"]');
|
||||
$label.text($label.text().replace(/:.*/, ': ' + jq('#' + pair[0]).val() + pair[1]));
|
||||
});
|
||||
}
|
||||
const WIN = window; // eslint-disable-line no-undef
|
||||
const JQ = WIN.jQuery;
|
||||
|
||||
function updateQrCode() {
|
||||
var options = {
|
||||
render: jq('#render').val(),
|
||||
ecLevel: jq('#eclevel').val(),
|
||||
minVersion: parseInt(jq('#minversion').val(), 10),
|
||||
const GUI_VALUE_PAIRS = [
|
||||
['size', 'px'],
|
||||
['minversion', ''],
|
||||
['quiet', ' modules'],
|
||||
['radius', '%'],
|
||||
['msize', '%'],
|
||||
['mposx', '%'],
|
||||
['mposy', '%']
|
||||
];
|
||||
|
||||
fill: jq('#fill').val(),
|
||||
background: jq('#background').val(),
|
||||
// fill: jq('#img-buffer')[0],
|
||||
const update_gui = () => {
|
||||
JQ.each(GUI_VALUE_PAIRS, (idx, pair) => {
|
||||
const $label = JQ('label[for="' + pair[0] + '"]');
|
||||
$label.text($label.text().replace(/:.*/, ': ' + JQ('#' + pair[0]).val() + pair[1]));
|
||||
});
|
||||
};
|
||||
|
||||
text: jq('#text').val(),
|
||||
size: parseInt(jq('#size').val(), 10),
|
||||
radius: parseInt(jq('#radius').val(), 10) * 0.01,
|
||||
quiet: parseInt(jq('#quiet').val(), 10),
|
||||
const update_qrcode = () => {
|
||||
const options = {
|
||||
render: JQ('#render').val(),
|
||||
ecLevel: JQ('#eclevel').val(),
|
||||
minVersion: parseInt(JQ('#minversion').val(), 10),
|
||||
|
||||
mode: parseInt(jq('#mode').val(), 10),
|
||||
fill: JQ('#fill').val(),
|
||||
background: JQ('#background').val(),
|
||||
|
||||
mSize: parseInt(jq('#msize').val(), 10) * 0.01,
|
||||
mPosX: parseInt(jq('#mposx').val(), 10) * 0.01,
|
||||
mPosY: parseInt(jq('#mposy').val(), 10) * 0.01,
|
||||
text: JQ('#text').val(),
|
||||
size: parseInt(JQ('#size').val(), 10),
|
||||
radius: parseInt(JQ('#radius').val(), 10) * 0.01,
|
||||
quiet: parseInt(JQ('#quiet').val(), 10),
|
||||
|
||||
label: jq('#label').val(),
|
||||
fontname: jq('#font').val(),
|
||||
fontcolor: jq('#fontcolor').val(),
|
||||
mode: parseInt(JQ('#mode').val(), 10),
|
||||
|
||||
image: jq('#img-buffer')[0]
|
||||
};
|
||||
mSize: parseInt(JQ('#msize').val(), 10) * 0.01,
|
||||
mPosX: parseInt(JQ('#mposx').val(), 10) * 0.01,
|
||||
mPosY: parseInt(JQ('#mposy').val(), 10) * 0.01,
|
||||
|
||||
jq('#container').empty().qrcode(options);
|
||||
}
|
||||
label: JQ('#label').val(),
|
||||
fontname: JQ('#font').val(),
|
||||
fontcolor: JQ('#fontcolor').val(),
|
||||
|
||||
function update() {
|
||||
updateGui();
|
||||
updateQrCode();
|
||||
}
|
||||
image: JQ('#img-buffer')[0]
|
||||
};
|
||||
|
||||
function onImageInput() {
|
||||
var input = jq('#image')[0];
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
jq('#img-buffer').attr('src', event.target.result);
|
||||
jq('#mode').val('4');
|
||||
setTimeout(update, 250);
|
||||
};
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
}
|
||||
}
|
||||
// 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 download() {
|
||||
jq('#download').attr('href', jq('#container canvas')[0].toDataURL('image/png'));
|
||||
}
|
||||
JQ('#container').empty().qrcode(options);
|
||||
};
|
||||
|
||||
const update = () => {
|
||||
update_gui();
|
||||
update_qrcode();
|
||||
};
|
||||
|
||||
function init() {
|
||||
jq('#download').on('click', download);
|
||||
jq('#image').on('change', onImageInput);
|
||||
jq('input, textarea, select').on('input change', update);
|
||||
jq(window).on('load', update);
|
||||
update();
|
||||
const on_img_input = () => {
|
||||
const input = JQ('#image')[0];
|
||||
if (input.files && input.files[0]) {
|
||||
const reader = new WIN.FileReader();
|
||||
reader.onload = event => {
|
||||
JQ('#img-buffer').attr('src', event.target.result);
|
||||
JQ('#mode').val('4');
|
||||
setTimeout(update, 250);
|
||||
};
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const download = () => {
|
||||
JQ('#download').attr('href', JQ('#container canvas')[0].toDataURL('image/png'));
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
JQ('#download').on('click', download);
|
||||
JQ('#image').on('change', on_img_input);
|
||||
JQ('input, textarea, select').on('input change', update);
|
||||
JQ(WIN).on('load', update);
|
||||
update();
|
||||
};
|
||||
|
||||
jq(init);
|
||||
}());
|
||||
JQ(init);
|
||||
|
||||
@ -1,449 +1,433 @@
|
||||
(function (vendor_qrcode) {
|
||||
'use strict';
|
||||
const VQRCODE = require('./vqrcode');
|
||||
|
||||
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)
|
||||
var hasCanvas = (function () {
|
||||
var elem = document.createElement('canvas');
|
||||
return !!(elem.getContext && elem.getContext('2d'));
|
||||
}());
|
||||
// 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'));
|
||||
})();
|
||||
|
||||
// Wrapper for the original QR code generator.
|
||||
function createQRCode(text, level, version, quiet) {
|
||||
var qr = {};
|
||||
const is_img_el = x => x && typeof x.tagName === 'string' && x.tagName.toUpperCase() === 'IMG';
|
||||
|
||||
var vqr = vendor_qrcode(version, level);
|
||||
vqr.addData(text);
|
||||
vqr.make();
|
||||
// Wrapper for the original QR code generator.
|
||||
const create_qrcode = (text, level, version, quiet) => {
|
||||
const qr = {};
|
||||
|
||||
quiet = quiet || 0;
|
||||
const vqr = VQRCODE(version, level);
|
||||
vqr.addData(text);
|
||||
vqr.make();
|
||||
|
||||
var qrModuleCount = vqr.getModuleCount();
|
||||
var quietModuleCount = vqr.getModuleCount() + 2 * quiet;
|
||||
quiet = quiet || 0;
|
||||
|
||||
function isDark(row, col) {
|
||||
row -= quiet;
|
||||
col -= quiet;
|
||||
const module_count = vqr.getModuleCount();
|
||||
const quiet_module_count = module_count + 2 * quiet;
|
||||
|
||||
if (row < 0 || row >= qrModuleCount || col < 0 || col >= qrModuleCount) {
|
||||
return false;
|
||||
}
|
||||
return vqr.isDark(row, col);
|
||||
}
|
||||
|
||||
function addBlank(l, t, r, b) {
|
||||
var prevIsDark = qr.isDark;
|
||||
var moduleSize = 1 / quietModuleCount;
|
||||
const is_dark = (row, col) => {
|
||||
row -= quiet;
|
||||
col -= quiet;
|
||||
return row >= 0 && row < module_count && col >= 0 && col < module_count && vqr.isDark(row, col);
|
||||
};
|
||||
|
||||
qr.isDark = function (row, col) {
|
||||
var ml = col * moduleSize;
|
||||
var mt = row * moduleSize;
|
||||
var mr = ml + moduleSize;
|
||||
var mb = mt + moduleSize;
|
||||
const add_blank = (l, t, r, b) => {
|
||||
const prev_is_dark = qr.is_dark;
|
||||
const module_size = 1 / quiet_module_count;
|
||||
|
||||
return prevIsDark(row, col) && (l > mr || ml > r || t > mb || mt > b);
|
||||
};
|
||||
}
|
||||
|
||||
qr.text = text;
|
||||
qr.level = level;
|
||||
qr.version = version;
|
||||
qr.moduleCount = quietModuleCount;
|
||||
qr.isDark = isDark;
|
||||
qr.addBlank = addBlank;
|
||||
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);
|
||||
};
|
||||
};
|
||||
|
||||
return qr;
|
||||
qr.text = text;
|
||||
qr.level = level;
|
||||
qr.version = version;
|
||||
qr.module_count = quiet_module_count;
|
||||
qr.is_dark = is_dark;
|
||||
qr.add_blank = add_blank;
|
||||
|
||||
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`.
|
||||
const 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);
|
||||
for (let ver = min_ver; ver <= max_ver; ver += 1) {
|
||||
try {
|
||||
return create_qrcode(text, level, ver, quiet);
|
||||
} catch (err) {/* empty */}
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const draw_background_label = (qr, context, settings) => {
|
||||
const size = settings.size;
|
||||
const font = 'bold ' + settings.mSize * size + 'px ' + settings.fontname;
|
||||
const ctx = JQ('<canvas/>')[0].getContext('2d');
|
||||
|
||||
ctx.font = font;
|
||||
|
||||
const w = ctx.measureText(settings.label).width;
|
||||
const sh = settings.mSize;
|
||||
const sw = w / size;
|
||||
const sl = (1 - sw) * settings.mPosX;
|
||||
const st = (1 - sh) * settings.mPosY;
|
||||
const sr = sl + sw;
|
||||
const sb = st + sh;
|
||||
const pad = 0.01;
|
||||
|
||||
if (settings.mode === 1) {
|
||||
// Strip
|
||||
qr.add_blank(0, st - pad, size, sb + pad);
|
||||
} else {
|
||||
// Box
|
||||
qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
|
||||
}
|
||||
|
||||
// Returns a minimal QR code for the given text starting with version `minVersion`.
|
||||
// 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 {
|
||||
return createQRCode(text, level, version, quiet);
|
||||
} catch (err) {/* empty */}
|
||||
}
|
||||
return undefined;
|
||||
context.fillStyle = settings.fontcolor;
|
||||
context.font = font;
|
||||
context.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size);
|
||||
};
|
||||
|
||||
const draw_background_img = (qr, context, settings) => {
|
||||
const size = settings.size;
|
||||
const w = settings.image.naturalWidth || 1;
|
||||
const h = settings.image.naturalHeight || 1;
|
||||
const sh = settings.mSize;
|
||||
const sw = sh * w / h;
|
||||
const sl = (1 - sw) * settings.mPosX;
|
||||
const st = (1 - sh) * settings.mPosY;
|
||||
const sr = sl + sw;
|
||||
const sb = st + sh;
|
||||
const pad = 0.01;
|
||||
|
||||
if (settings.mode === 3) {
|
||||
// Strip
|
||||
qr.add_blank(0, st - pad, size, sb + pad);
|
||||
} else {
|
||||
// Box
|
||||
qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
|
||||
}
|
||||
|
||||
function drawBackgroundLabel(qr, context, settings) {
|
||||
var size = settings.size;
|
||||
var font = 'bold ' + settings.mSize * size + 'px ' + settings.fontname;
|
||||
var ctx = jq('<canvas/>')[0].getContext('2d');
|
||||
|
||||
ctx.font = font;
|
||||
|
||||
var w = ctx.measureText(settings.label).width;
|
||||
var sh = settings.mSize;
|
||||
var sw = w / size;
|
||||
var sl = (1 - sw) * settings.mPosX;
|
||||
var st = (1 - sh) * settings.mPosY;
|
||||
var sr = sl + sw;
|
||||
var sb = st + sh;
|
||||
var pad = 0.01;
|
||||
|
||||
if (settings.mode === 1) {
|
||||
// Strip
|
||||
qr.addBlank(0, st - pad, size, sb + pad);
|
||||
} else {
|
||||
// Box
|
||||
qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
|
||||
}
|
||||
context.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);
|
||||
};
|
||||
|
||||
context.fillStyle = settings.fontcolor;
|
||||
context.font = font;
|
||||
context.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size);
|
||||
const draw_background = (qr, context, settings) => {
|
||||
if (is_img_el(settings.background)) {
|
||||
context.drawImage(settings.background, 0, 0, settings.size, settings.size);
|
||||
} else if (settings.background) {
|
||||
context.fillStyle = settings.background;
|
||||
context.fillRect(settings.left, settings.top, settings.size, settings.size);
|
||||
}
|
||||
|
||||
function drawBackgroundImage(qr, context, settings) {
|
||||
var size = settings.size;
|
||||
var w = settings.image.naturalWidth || 1;
|
||||
var h = settings.image.naturalHeight || 1;
|
||||
var sh = settings.mSize;
|
||||
var sw = sh * w / h;
|
||||
var sl = (1 - sw) * settings.mPosX;
|
||||
var st = (1 - sh) * settings.mPosY;
|
||||
var sr = sl + sw;
|
||||
var sb = st + sh;
|
||||
var pad = 0.01;
|
||||
|
||||
if (settings.mode === 3) {
|
||||
// Strip
|
||||
qr.addBlank(0, st - pad, size, sb + pad);
|
||||
} else {
|
||||
// Box
|
||||
qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
|
||||
}
|
||||
const mode = settings.mode;
|
||||
if (mode === 1 || mode === 2) {
|
||||
draw_background_label(qr, context, settings);
|
||||
} else if (is_img_el(settings.image) && (mode === 3 || mode === 4)) {
|
||||
draw_background_img(qr, context, settings);
|
||||
}
|
||||
};
|
||||
|
||||
context.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);
|
||||
const draw_modules_default = (qr, context, settings, left, top, width, row, col) => {
|
||||
if (qr.is_dark(row, col)) {
|
||||
context.rect(left, top, width, width);
|
||||
}
|
||||
};
|
||||
|
||||
function drawBackground(qr, context, settings) {
|
||||
if (jq(settings.background).is('img')) {
|
||||
context.drawImage(settings.background, 0, 0, settings.size, settings.size);
|
||||
} else if (settings.background) {
|
||||
context.fillStyle = settings.background;
|
||||
context.fillRect(settings.left, settings.top, settings.size, settings.size);
|
||||
}
|
||||
const draw_modules_rounded_dark = (ctx, l, t, r, b, rad, nw, ne, se, sw) => {
|
||||
if (nw) {
|
||||
ctx.moveTo(l + rad, t);
|
||||
} else {
|
||||
ctx.moveTo(l, t);
|
||||
}
|
||||
|
||||
var mode = settings.mode;
|
||||
if (mode === 1 || mode === 2) {
|
||||
drawBackgroundLabel(qr, context, settings);
|
||||
} else if (mode === 3 || mode === 4) {
|
||||
drawBackgroundImage(qr, context, settings);
|
||||
}
|
||||
if (ne) {
|
||||
ctx.lineTo(r - rad, t);
|
||||
ctx.arcTo(r, t, r, b, rad);
|
||||
} else {
|
||||
ctx.lineTo(r, t);
|
||||
}
|
||||
|
||||
function drawModuleDefault(qr, context, settings, left, top, width, row, col) {
|
||||
if (qr.isDark(row, col)) {
|
||||
context.rect(left, top, width, width);
|
||||
}
|
||||
if (se) {
|
||||
ctx.lineTo(r, b - rad);
|
||||
ctx.arcTo(r, b, l, b, rad);
|
||||
} else {
|
||||
ctx.lineTo(r, b);
|
||||
}
|
||||
|
||||
function drawModuleRoundedDark(ctx, l, t, r, b, rad, nw, ne, se, sw) {
|
||||
if (nw) {
|
||||
ctx.moveTo(l + rad, t);
|
||||
} else {
|
||||
ctx.moveTo(l, t);
|
||||
}
|
||||
if (sw) {
|
||||
ctx.lineTo(l + rad, b);
|
||||
ctx.arcTo(l, b, l, t, rad);
|
||||
} else {
|
||||
ctx.lineTo(l, b);
|
||||
}
|
||||
|
||||
if (ne) {
|
||||
ctx.lineTo(r - rad, t);
|
||||
ctx.arcTo(r, t, r, b, rad);
|
||||
} else {
|
||||
ctx.lineTo(r, t);
|
||||
}
|
||||
if (nw) {
|
||||
ctx.lineTo(l, t + rad);
|
||||
ctx.arcTo(l, t, r, t, rad);
|
||||
} else {
|
||||
ctx.lineTo(l, t);
|
||||
}
|
||||
};
|
||||
|
||||
const draw_modules_rounded_light = (ctx, l, t, r, b, rad, nw, ne, se, sw) => {
|
||||
if (nw) {
|
||||
ctx.moveTo(l + rad, t);
|
||||
ctx.lineTo(l, t);
|
||||
ctx.lineTo(l, t + rad);
|
||||
ctx.arcTo(l, t, l + rad, t, rad);
|
||||
}
|
||||
|
||||
if (se) {
|
||||
ctx.lineTo(r, b - rad);
|
||||
ctx.arcTo(r, b, l, b, rad);
|
||||
} else {
|
||||
ctx.lineTo(r, b);
|
||||
}
|
||||
if (ne) {
|
||||
ctx.moveTo(r - rad, t);
|
||||
ctx.lineTo(r, t);
|
||||
ctx.lineTo(r, t + rad);
|
||||
ctx.arcTo(r, t, r - rad, t, rad);
|
||||
}
|
||||
|
||||
if (sw) {
|
||||
ctx.lineTo(l + rad, b);
|
||||
ctx.arcTo(l, b, l, t, rad);
|
||||
} else {
|
||||
ctx.lineTo(l, b);
|
||||
}
|
||||
if (se) {
|
||||
ctx.moveTo(r - rad, b);
|
||||
ctx.lineTo(r, b);
|
||||
ctx.lineTo(r, b - rad);
|
||||
ctx.arcTo(r, b, r - rad, b, rad);
|
||||
}
|
||||
|
||||
if (nw) {
|
||||
ctx.lineTo(l, t + rad);
|
||||
ctx.arcTo(l, t, r, t, rad);
|
||||
} else {
|
||||
ctx.lineTo(l, t);
|
||||
}
|
||||
if (sw) {
|
||||
ctx.moveTo(l + rad, b);
|
||||
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 is_dark = qr.is_dark;
|
||||
const right = left + width;
|
||||
const bottom = top + width;
|
||||
const radius = settings.radius * width;
|
||||
const rowT = row - 1;
|
||||
const rowB = row + 1;
|
||||
const colL = col - 1;
|
||||
const colR = col + 1;
|
||||
const center = is_dark(row, col);
|
||||
const northwest = is_dark(rowT, colL);
|
||||
const north = is_dark(rowT, col);
|
||||
const northeast = is_dark(rowT, colR);
|
||||
const east = is_dark(row, colR);
|
||||
const southeast = is_dark(rowB, colR);
|
||||
const south = is_dark(rowB, col);
|
||||
const southwest = is_dark(rowB, colL);
|
||||
const west = is_dark(row, colL);
|
||||
|
||||
if (center) {
|
||||
draw_modules_rounded_dark(context, left, top, right, bottom, radius, !north && !west, !north && !east, !south && !east, !south && !west);
|
||||
} else {
|
||||
draw_modules_rounded_light(context, left, top, right, bottom, radius, north && west && northwest, north && east && northeast, south && east && southeast, south && west && southwest);
|
||||
}
|
||||
};
|
||||
|
||||
function drawModuleRoundendLight(ctx, l, t, r, b, rad, nw, ne, se, sw) {
|
||||
if (nw) {
|
||||
ctx.moveTo(l + rad, t);
|
||||
ctx.lineTo(l, t);
|
||||
ctx.lineTo(l, t + rad);
|
||||
ctx.arcTo(l, t, l + rad, t, rad);
|
||||
}
|
||||
const draw_modules = (qr, context, settings) => {
|
||||
const module_count = qr.module_count;
|
||||
const module_size = settings.size / module_count;
|
||||
let fn = draw_modules_default;
|
||||
let row;
|
||||
let col;
|
||||
|
||||
if (ne) {
|
||||
ctx.moveTo(r - rad, t);
|
||||
ctx.lineTo(r, t);
|
||||
ctx.lineTo(r, t + rad);
|
||||
ctx.arcTo(r, t, r - rad, t, rad);
|
||||
}
|
||||
if (settings.radius > 0 && settings.radius <= 0.5) {
|
||||
fn = draw_modules_rounded;
|
||||
}
|
||||
|
||||
if (se) {
|
||||
ctx.moveTo(r - rad, b);
|
||||
ctx.lineTo(r, b);
|
||||
ctx.lineTo(r, b - rad);
|
||||
ctx.arcTo(r, b, r - rad, b, rad);
|
||||
}
|
||||
context.beginPath();
|
||||
for (row = 0; row < module_count; row += 1) {
|
||||
for (col = 0; col < module_count; col += 1) {
|
||||
const l = settings.left + col * module_size;
|
||||
const t = settings.top + row * module_size;
|
||||
const w = module_size;
|
||||
|
||||
if (sw) {
|
||||
ctx.moveTo(l + rad, b);
|
||||
ctx.lineTo(l, b);
|
||||
ctx.lineTo(l, b - rad);
|
||||
ctx.arcTo(l, b, l + rad, b, rad);
|
||||
fn(qr, context, settings, l, t, w, row, col);
|
||||
}
|
||||
}
|
||||
|
||||
function drawModuleRounded(qr, context, settings, left, top, width, row, col) {
|
||||
var isDark = qr.isDark;
|
||||
var right = left + width;
|
||||
var bottom = top + width;
|
||||
var radius = settings.radius * width;
|
||||
var rowT = row - 1;
|
||||
var rowB = row + 1;
|
||||
var colL = col - 1;
|
||||
var colR = col + 1;
|
||||
var center = isDark(row, col);
|
||||
var northwest = isDark(rowT, colL);
|
||||
var north = isDark(rowT, col);
|
||||
var northeast = isDark(rowT, colR);
|
||||
var east = isDark(row, colR);
|
||||
var southeast = isDark(rowB, colR);
|
||||
var south = isDark(rowB, col);
|
||||
var southwest = isDark(rowB, colL);
|
||||
var west = isDark(row, colL);
|
||||
|
||||
if (center) {
|
||||
drawModuleRoundedDark(context, left, top, right, bottom, radius, !north && !west, !north && !east, !south && !east, !south && !west);
|
||||
} else {
|
||||
drawModuleRoundendLight(context, left, top, right, bottom, radius, north && west && northwest, north && east && northeast, south && east && southeast, south && west && southwest);
|
||||
}
|
||||
if (is_img_el(settings.fill)) {
|
||||
context.strokeStyle = 'rgba(0,0,0,0.5)';
|
||||
context.lineWidth = 2;
|
||||
context.stroke();
|
||||
const prev = context.globalCompositeOperation;
|
||||
context.globalCompositeOperation = 'destination-out';
|
||||
context.fill();
|
||||
context.globalCompositeOperation = prev;
|
||||
|
||||
context.clip();
|
||||
context.drawImage(settings.fill, 0, 0, settings.size, settings.size);
|
||||
context.restore();
|
||||
} else {
|
||||
context.fillStyle = settings.fill;
|
||||
context.fill();
|
||||
}
|
||||
};
|
||||
|
||||
function drawModules(qr, context, settings) {
|
||||
var moduleCount = qr.moduleCount;
|
||||
var moduleSize = settings.size / moduleCount;
|
||||
var fn = drawModuleDefault;
|
||||
var row;
|
||||
var col;
|
||||
|
||||
if (settings.radius > 0 && settings.radius <= 0.5) {
|
||||
fn = drawModuleRounded;
|
||||
}
|
||||
// Draws QR code to the given `canvas` and returns it.
|
||||
const draw_on_canvas = (canvas, settings) => {
|
||||
const qr = create_min_qrcode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
|
||||
if (!qr) {
|
||||
return null;
|
||||
}
|
||||
|
||||
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;
|
||||
const $canvas = JQ(canvas).data('qrcode', qr);
|
||||
const context = $canvas[0].getContext('2d');
|
||||
|
||||
fn(qr, context, settings, l, t, w, row, col);
|
||||
}
|
||||
}
|
||||
if (jq(settings.fill).is('img')) {
|
||||
context.strokeStyle = 'rgba(0,0,0,0.5)';
|
||||
context.lineWidth = 2;
|
||||
context.stroke();
|
||||
var prev = context.globalCompositeOperation;
|
||||
context.globalCompositeOperation = 'destination-out';
|
||||
context.fill();
|
||||
context.globalCompositeOperation = prev;
|
||||
|
||||
context.clip();
|
||||
context.drawImage(settings.fill, 0, 0, settings.size, settings.size);
|
||||
context.restore();
|
||||
} else {
|
||||
context.fillStyle = settings.fill;
|
||||
context.fill();
|
||||
}
|
||||
}
|
||||
draw_background(qr, context, settings);
|
||||
draw_modules(qr, context, settings);
|
||||
|
||||
// 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) {
|
||||
return null;
|
||||
}
|
||||
return $canvas;
|
||||
};
|
||||
|
||||
var $canvas = jq(canvas).data('qrcode', qr);
|
||||
var context = $canvas[0].getContext('2d');
|
||||
// Returns a `canvas` element representing the QR code for the given settings.
|
||||
const create_canvas = settings => {
|
||||
const $canvas = JQ('<canvas/>').attr('width', settings.size).attr('height', settings.size);
|
||||
return draw_on_canvas($canvas, settings);
|
||||
};
|
||||
|
||||
drawBackground(qr, context, settings);
|
||||
drawModules(qr, context, settings);
|
||||
// Returns an `image` element representing the QR code for the given settings.
|
||||
const create_img = settings => {
|
||||
return JQ('<img/>').attr('src', create_canvas(settings)[0].toDataURL('image/png'));
|
||||
};
|
||||
|
||||
return $canvas;
|
||||
// Returns a `div` element representing the QR code for the given settings.
|
||||
const create_div = settings => {
|
||||
const qr = create_min_qrcode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
|
||||
if (!qr) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
// some shortcuts to improve compression
|
||||
const settings_size = settings.size;
|
||||
const settings_bgColor = settings.background;
|
||||
const math_floor = Math.floor;
|
||||
|
||||
// Returns an `image` element representing the QR code for the given settings.
|
||||
function createImage(settings) {
|
||||
return jq('<img/>').attr('src', createCanvas(settings)[0].toDataURL('image/png'));
|
||||
}
|
||||
const module_count = qr.module_count;
|
||||
const module_size = math_floor(settings_size / module_count);
|
||||
const offset = math_floor(0.5 * (settings_size - module_size * module_count));
|
||||
|
||||
// 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) {
|
||||
return null;
|
||||
}
|
||||
let row;
|
||||
let col;
|
||||
|
||||
// some shortcuts to improve compression
|
||||
var settings_size = settings.size;
|
||||
var settings_bgColor = settings.background;
|
||||
var math_floor = Math.floor;
|
||||
|
||||
var moduleCount = qr.moduleCount;
|
||||
var moduleSize = math_floor(settings_size / moduleCount);
|
||||
var offset = math_floor(0.5 * (settings_size - moduleSize * moduleCount));
|
||||
|
||||
var row;
|
||||
var col;
|
||||
|
||||
var containerCSS = {
|
||||
position: 'relative',
|
||||
left: 0,
|
||||
top: 0,
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
width: settings_size,
|
||||
height: settings_size
|
||||
};
|
||||
var darkCSS = {
|
||||
position: 'absolute',
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
width: moduleSize,
|
||||
height: moduleSize,
|
||||
'background-color': settings.fill
|
||||
};
|
||||
const container_css = {
|
||||
position: 'relative',
|
||||
left: 0,
|
||||
top: 0,
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
width: settings_size,
|
||||
height: settings_size
|
||||
};
|
||||
const dark_css = {
|
||||
position: 'absolute',
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
width: module_size,
|
||||
height: module_size,
|
||||
'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) {
|
||||
$div.css('background-color', settings_bgColor);
|
||||
}
|
||||
if (settings_bgColor) {
|
||||
$div.css('background-color', settings_bgColor);
|
||||
}
|
||||
|
||||
for (row = 0; row < moduleCount; row += 1) {
|
||||
for (col = 0; col < moduleCount; col += 1) {
|
||||
if (qr.isDark(row, col)) {
|
||||
jq('<div/>')
|
||||
.css(darkCSS)
|
||||
.css({
|
||||
left: offset + col * moduleSize,
|
||||
top: offset + row * moduleSize
|
||||
})
|
||||
.appendTo($div);
|
||||
}
|
||||
for (row = 0; row < module_count; row += 1) {
|
||||
for (col = 0; col < module_count; col += 1) {
|
||||
if (qr.is_dark(row, col)) {
|
||||
JQ('<div/>')
|
||||
.css(dark_css)
|
||||
.css({
|
||||
left: offset + col * module_size,
|
||||
top: offset + row * module_size
|
||||
})
|
||||
.appendTo($div);
|
||||
}
|
||||
}
|
||||
|
||||
return $div;
|
||||
}
|
||||
|
||||
function createHTML(settings) {
|
||||
if (hasCanvas && settings.render === 'canvas') {
|
||||
return createCanvas(settings);
|
||||
} else if (hasCanvas && settings.render === 'image') {
|
||||
return createImage(settings);
|
||||
}
|
||||
return $div;
|
||||
};
|
||||
|
||||
return createDiv(settings);
|
||||
const 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 = {
|
||||
// render method: `'canvas'`, `'image'` or `'div'`
|
||||
render: 'canvas',
|
||||
const DEFAULTS = {
|
||||
// render method: `'canvas'`, `'image'` or `'div'`
|
||||
render: 'canvas',
|
||||
|
||||
// version range somewhere in 1 .. 40
|
||||
minVersion: 1,
|
||||
maxVersion: 40,
|
||||
// version range somewhere in 1 .. 40
|
||||
minVersion: 1,
|
||||
maxVersion: 40,
|
||||
|
||||
// error correction level: `'L'`, `'M'`, `'Q'` or `'H'`
|
||||
ecLevel: 'L',
|
||||
// error correction level: `'L'`, `'M'`, `'Q'` or `'H'`
|
||||
ecLevel: 'L',
|
||||
|
||||
// offset in pixel if drawn onto existing canvas
|
||||
left: 0,
|
||||
top: 0,
|
||||
// offset in pixel if drawn onto existing canvas
|
||||
left: 0,
|
||||
top: 0,
|
||||
|
||||
// size in pixel
|
||||
size: 200,
|
||||
// size in pixel
|
||||
size: 200,
|
||||
|
||||
// code color or image element
|
||||
fill: '#000',
|
||||
// code color or image element
|
||||
fill: '#000',
|
||||
|
||||
// background color or image element, `null` for transparent background
|
||||
background: null,
|
||||
// background color or image element, `null` for transparent background
|
||||
background: '#fff',
|
||||
|
||||
// content
|
||||
text: 'no text',
|
||||
// content
|
||||
text: 'no text',
|
||||
|
||||
// corner radius relative to module width: 0.0 .. 0.5
|
||||
radius: 0,
|
||||
// corner radius relative to module width: 0.0 .. 0.5
|
||||
radius: 0,
|
||||
|
||||
// quiet zone in modules
|
||||
quiet: 0,
|
||||
// quiet zone in modules
|
||||
quiet: 0,
|
||||
|
||||
// modes
|
||||
// 0: normal
|
||||
// 1: label strip
|
||||
// 2: label box
|
||||
// 3: image strip
|
||||
// 4: image box
|
||||
mode: 0,
|
||||
// modes
|
||||
// 0: normal
|
||||
// 1: label strip
|
||||
// 2: label box
|
||||
// 3: image strip
|
||||
// 4: image box
|
||||
mode: 0,
|
||||
|
||||
mSize: 0.1,
|
||||
mPosX: 0.5,
|
||||
mPosY: 0.5,
|
||||
mSize: 0.1,
|
||||
mPosX: 0.5,
|
||||
mPosY: 0.5,
|
||||
|
||||
label: 'no label',
|
||||
fontname: 'sans',
|
||||
fontcolor: '#000',
|
||||
label: 'no label',
|
||||
fontname: 'sans',
|
||||
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) {
|
||||
const settings = JQ.extend({}, DEFAULTS, options);
|
||||
|
||||
return this.each(function (idx, el) {
|
||||
if (el.nodeName.toLowerCase() === 'canvas') {
|
||||
drawOnCanvas(el, settings);
|
||||
} else {
|
||||
jq(el).append(createHTML(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
|
||||
}()));
|
||||
return this.each((idx, el) => {
|
||||
if (el.nodeName.toLowerCase() === 'canvas') {
|
||||
draw_on_canvas(el, settings);
|
||||
} else {
|
||||
JQ(el).append(create_html(settings));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -0,0 +1,2 @@
|
||||
// @include "../vendor/qrcode.js"
|
||||
// @include "../vendor/qrcode_UTF8.js"
|
||||
Loading…
Reference in New Issue