|
|
|
@ -1,15 +1,21 @@
|
|
|
|
const WIN = window; // eslint-disable-line
|
|
|
|
const VQRCODE = require('./vqrcode');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const WIN = window; // eslint-disable-line no-undef
|
|
|
|
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.
|
|
|
|
const create_qrcode = (text, level, version, quiet) => {
|
|
|
|
const create_qrcode = (text, level, version, quiet) => {
|
|
|
|
const qr = {};
|
|
|
|
const qr = {};
|
|
|
|
|
|
|
|
|
|
|
|
const qr_gen = require('qrcode-generator');
|
|
|
|
const vqr = VQRCODE(version, level);
|
|
|
|
qr_gen.stringToBytes = qr_gen.stringToBytesFuncs['UTF-8'];
|
|
|
|
|
|
|
|
const vqr = qr_gen(version, level);
|
|
|
|
|
|
|
|
vqr.addData(text);
|
|
|
|
vqr.addData(text);
|
|
|
|
vqr.make();
|
|
|
|
vqr.make();
|
|
|
|
|
|
|
|
|
|
|
|
@ -60,14 +66,14 @@ const create_min_qrcode = (text, level, min_ver, max_ver, quiet) => {
|
|
|
|
return undefined;
|
|
|
|
return undefined;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const draw_background_label = (qr, ctx, settings) => {
|
|
|
|
const draw_background_label = (qr, context, 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 tmp_ctx = JQ('<canvas/>')[0].getContext('2d');
|
|
|
|
const ctx = JQ('<canvas/>')[0].getContext('2d');
|
|
|
|
|
|
|
|
|
|
|
|
tmp_ctx.font = font;
|
|
|
|
ctx.font = font;
|
|
|
|
|
|
|
|
|
|
|
|
const w = tmp_ctx.measureText(settings.label).width;
|
|
|
|
const w = 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;
|
|
|
|
@ -84,12 +90,12 @@ const draw_background_label = (qr, ctx, settings) => {
|
|
|
|
qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
|
|
|
|
qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
ctx.fillStyle = settings.fontcolor;
|
|
|
|
context.fillStyle = settings.fontcolor;
|
|
|
|
ctx.font = font;
|
|
|
|
context.font = font;
|
|
|
|
ctx.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);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const draw_background_img = (qr, ctx, settings) => {
|
|
|
|
const draw_background_img = (qr, context, 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;
|
|
|
|
@ -109,150 +115,159 @@ const draw_background_img = (qr, ctx, settings) => {
|
|
|
|
qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
|
|
|
|
qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
ctx.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);
|
|
|
|
context.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const draw_background = (qr, ctx, settings) => {
|
|
|
|
const draw_background = (qr, context, settings) => {
|
|
|
|
if (is_img_el(settings.background)) {
|
|
|
|
if (is_img_el(settings.background)) {
|
|
|
|
ctx.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) {
|
|
|
|
ctx.fillStyle = settings.background;
|
|
|
|
context.fillStyle = settings.background;
|
|
|
|
ctx.fillRect(settings.left, settings.top, settings.size, settings.size);
|
|
|
|
context.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, ctx, settings);
|
|
|
|
draw_background_label(qr, context, 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, ctx, settings);
|
|
|
|
draw_background_img(qr, context, settings);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const draw_modules_default = (qr, ctx, settings, left, top, width, row, col) => {
|
|
|
|
const draw_modules_default = (qr, context, settings, left, top, width, row, col) => {
|
|
|
|
if (qr.is_dark(row, col)) {
|
|
|
|
if (qr.is_dark(row, col)) {
|
|
|
|
ctx.r(left, top, width, width);
|
|
|
|
context.rect(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.m(l + rad, t);
|
|
|
|
ctx.moveTo(l + rad, t);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
ctx.m(l, t);
|
|
|
|
ctx.moveTo(l, t);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (ne) {
|
|
|
|
if (ne) {
|
|
|
|
ctx.l(r - rad, t).a(r, t, r, b, rad);
|
|
|
|
ctx.lineTo(r - rad, t);
|
|
|
|
|
|
|
|
ctx.arcTo(r, t, r, b, rad);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
ctx.l(r, t);
|
|
|
|
ctx.lineTo(r, t);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (se) {
|
|
|
|
if (se) {
|
|
|
|
ctx.l(r, b - rad).a(r, b, l, b, rad);
|
|
|
|
ctx.lineTo(r, b - rad);
|
|
|
|
|
|
|
|
ctx.arcTo(r, b, l, b, rad);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
ctx.l(r, b);
|
|
|
|
ctx.lineTo(r, b);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (sw) {
|
|
|
|
if (sw) {
|
|
|
|
ctx.l(l + rad, b).a(l, b, l, t, rad);
|
|
|
|
ctx.lineTo(l + rad, b);
|
|
|
|
|
|
|
|
ctx.arcTo(l, b, l, t, rad);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
ctx.l(l, b);
|
|
|
|
ctx.lineTo(l, b);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (nw) {
|
|
|
|
if (nw) {
|
|
|
|
ctx.l(l, t + rad).a(l, t, r, t, rad);
|
|
|
|
ctx.lineTo(l, t + rad);
|
|
|
|
|
|
|
|
ctx.arcTo(l, t, r, t, rad);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
ctx.l(l, t);
|
|
|
|
ctx.lineTo(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.m(l + rad, t).l(l, t).l(l, t + rad).a(l, t, l + rad, t, rad);
|
|
|
|
ctx.moveTo(l + rad, t);
|
|
|
|
|
|
|
|
ctx.lineTo(l, t);
|
|
|
|
|
|
|
|
ctx.lineTo(l, t + rad);
|
|
|
|
|
|
|
|
ctx.arcTo(l, t, l + rad, t, rad);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (ne) {
|
|
|
|
if (ne) {
|
|
|
|
ctx.m(r - rad, t).l(r, t).l(r, t + rad).a(r, t, r - rad, t, rad);
|
|
|
|
ctx.moveTo(r - rad, t);
|
|
|
|
|
|
|
|
ctx.lineTo(r, t);
|
|
|
|
|
|
|
|
ctx.lineTo(r, t + rad);
|
|
|
|
|
|
|
|
ctx.arcTo(r, t, r - rad, t, rad);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (se) {
|
|
|
|
if (se) {
|
|
|
|
ctx.m(r - rad, b).l(r, b).l(r, b - rad).a(r, b, r - rad, b, rad);
|
|
|
|
ctx.moveTo(r - rad, b);
|
|
|
|
|
|
|
|
ctx.lineTo(r, b);
|
|
|
|
|
|
|
|
ctx.lineTo(r, b - rad);
|
|
|
|
|
|
|
|
ctx.arcTo(r, b, r - rad, b, rad);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (sw) {
|
|
|
|
if (sw) {
|
|
|
|
ctx.m(l + rad, b).l(l, b).l(l, b - rad).a(l, b, l + rad, b, rad);
|
|
|
|
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, ctx, settings, left, top, width, row, col) => {
|
|
|
|
const draw_modules_rounded = (qr, context, 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 rad = settings.radius * width;
|
|
|
|
const radius = settings.radius * width;
|
|
|
|
|
|
|
|
const rowT = row - 1;
|
|
|
|
const row_n = row - 1;
|
|
|
|
const rowB = row + 1;
|
|
|
|
const row_s = row + 1;
|
|
|
|
const colL = col - 1;
|
|
|
|
const col_w = col - 1;
|
|
|
|
const colR = col + 1;
|
|
|
|
const col_e = col + 1;
|
|
|
|
const center = is_dark(row, col);
|
|
|
|
|
|
|
|
const northwest = is_dark(rowT, colL);
|
|
|
|
const is_dark = qr.is_dark;
|
|
|
|
const north = is_dark(rowT, col);
|
|
|
|
const d_center = is_dark(row, col);
|
|
|
|
const northeast = is_dark(rowT, colR);
|
|
|
|
const d_nw = is_dark(row_n, col_w);
|
|
|
|
const east = is_dark(row, colR);
|
|
|
|
const d_n = is_dark(row_n, col);
|
|
|
|
const southeast = is_dark(rowB, colR);
|
|
|
|
const d_ne = is_dark(row_n, col_e);
|
|
|
|
const south = is_dark(rowB, col);
|
|
|
|
const d_e = is_dark(row, col_e);
|
|
|
|
const southwest = is_dark(rowB, colL);
|
|
|
|
const d_se = is_dark(row_s, col_e);
|
|
|
|
const west = is_dark(row, colL);
|
|
|
|
const d_s = is_dark(row_s, col);
|
|
|
|
|
|
|
|
const d_sw = is_dark(row_s, col_w);
|
|
|
|
if (center) {
|
|
|
|
const d_w = is_dark(row, col_w);
|
|
|
|
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(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);
|
|
|
|
draw_modules_rounded_light(context, left, top, right, bottom, radius, north && west && northwest, north && east && northeast, south && east && southeast, south && west && southwest);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const draw_modules = (qr, ctx, settings) => {
|
|
|
|
const draw_modules = (qr, context, 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 fn = draw_modules_default;
|
|
|
|
|
|
|
|
let row;
|
|
|
|
|
|
|
|
let 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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const draw_ctx = {
|
|
|
|
context.beginPath();
|
|
|
|
m(x, y) {ctx.moveTo(x, y); return draw_ctx;},
|
|
|
|
for (row = 0; row < module_count; row += 1) {
|
|
|
|
l(x, y) {ctx.lineTo(x, y); return draw_ctx;},
|
|
|
|
for (col = 0; col < module_count; col += 1) {
|
|
|
|
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, draw_ctx, settings, l, t, w, row, col);
|
|
|
|
fn(qr, context, settings, l, t, w, row, col);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (is_img_el(settings.fill)) {
|
|
|
|
if (is_img_el(settings.fill)) {
|
|
|
|
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
|
|
|
|
context.strokeStyle = 'rgba(0,0,0,0.5)';
|
|
|
|
ctx.lineWidth = 2;
|
|
|
|
context.lineWidth = 2;
|
|
|
|
ctx.stroke();
|
|
|
|
context.stroke();
|
|
|
|
const prev = ctx.globalCompositeOperation;
|
|
|
|
const prev = context.globalCompositeOperation;
|
|
|
|
ctx.globalCompositeOperation = 'destination-out';
|
|
|
|
context.globalCompositeOperation = 'destination-out';
|
|
|
|
ctx.fill();
|
|
|
|
context.fill();
|
|
|
|
ctx.globalCompositeOperation = prev;
|
|
|
|
context.globalCompositeOperation = prev;
|
|
|
|
|
|
|
|
|
|
|
|
ctx.clip();
|
|
|
|
context.clip();
|
|
|
|
ctx.drawImage(settings.fill, 0, 0, settings.size, settings.size);
|
|
|
|
context.drawImage(settings.fill, 0, 0, settings.size, settings.size);
|
|
|
|
ctx.restore();
|
|
|
|
context.restore();
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
ctx.fillStyle = settings.fill;
|
|
|
|
context.fillStyle = settings.fill;
|
|
|
|
ctx.fill();
|
|
|
|
context.fill();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
@ -264,10 +279,10 @@ const draw_on_canvas = (canvas, settings) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const $canvas = JQ(canvas).data('qrcode', qr);
|
|
|
|
const $canvas = JQ(canvas).data('qrcode', qr);
|
|
|
|
const ctx = $canvas[0].getContext('2d');
|
|
|
|
const context = $canvas[0].getContext('2d');
|
|
|
|
|
|
|
|
|
|
|
|
draw_background(qr, ctx, settings);
|
|
|
|
draw_background(qr, context, settings);
|
|
|
|
draw_modules(qr, ctx, settings);
|
|
|
|
draw_modules(qr, context, settings);
|
|
|
|
|
|
|
|
|
|
|
|
return $canvas;
|
|
|
|
return $canvas;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
@ -299,6 +314,9 @@ 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,
|
|
|
|
@ -323,8 +341,8 @@ const create_div = settings => {
|
|
|
|
$div.css('background-color', settings_bgColor);
|
|
|
|
$div.css('background-color', settings_bgColor);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
for (let row = 0; row < module_count; row += 1) {
|
|
|
|
for (row = 0; row < module_count; row += 1) {
|
|
|
|
for (let col = 0; col < module_count; col += 1) {
|
|
|
|
for (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)
|
|
|
|
@ -341,9 +359,9 @@ const create_div = settings => {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const create_html = settings => {
|
|
|
|
const create_html = settings => {
|
|
|
|
if (settings.render === 'canvas') {
|
|
|
|
if (HAS_CANVAS && settings.render === 'canvas') {
|
|
|
|
return create_canvas(settings);
|
|
|
|
return create_canvas(settings);
|
|
|
|
} else if (settings.render === 'image') {
|
|
|
|
} else if (HAS_CANVAS && settings.render === 'image') {
|
|
|
|
return create_img(settings);
|
|
|
|
return create_img(settings);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
