UnknownObject/jquery-qrcode
1
0
Fork 0
mirror of https://github.com/lrsjng/jquery-qrcode.git synced 2026-08-12 20:01:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update.

Browse Source
This commit is contained in:
Lars Jung
2019-04-15 17:49:00 +02:00
parent ac0af48d8e
commit 86948f725f
13 changed files with 5277 additions and 5222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc
+1 -25
View File
@@ -5,30 +5,6 @@
es6: 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:
array-bracket-spacing: [2, never]
arrow-parens: [2, as-needed]
@@ -62,7 +38,7 @@
max-depth: [1, 4]
max-len: [0, 80, 4]
max-nested-callbacks: [1, 3]
max-params: [1, 5] ###
max-params: [1, 16] ###
max-statements: [1, 32] ###
new-cap: 0
new-parens: 2
README.md
+4 -1
View File
@@ -3,6 +3,8 @@
[![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).
There is a jQuery-free lib named [kjua][kjua] that works in all modern browsers
with crisp codes on all devices.
## License
@@ -33,7 +35,8 @@ THE SOFTWARE.
[github]: https://github.com/lrsjng/jquery-qrcode
[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
[qrcode]: https://github.com/kazuhikoarase/qrcode-generator
[kjua]: https://larsjung.de/kjua/
dist/jquery-qrcode.js
Vendored
+2225 -2150
View File
File diff suppressed because it is too large Load Diff
dist/jquery-qrcode.min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
ghu.js
+9 -6
View File
@@ -1,11 +1,10 @@
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 ROOT = resolve(__dirname);
const SRC = join(ROOT, 'src');
const VENDOR = join(ROOT, 'vendor');
const BUILD = join(ROOT, 'build');
const DIST = join(ROOT, 'dist');
@@ -25,11 +24,12 @@ ghu.task('clean', 'delete build folder', () => {
ghu.task('build:scripts', runtime => {
return read(`${SRC}/${NAME}.js`)
.then(webpack(webpack.cfg_umd(NAME, [SRC]), {showStats: false}))
.then(includeit())
.then(wrap(runtime.commentJs))
.then(write(`${DIST}/${NAME}.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(write(`${DIST}/${NAME}.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`)
.then(pug({pkg: runtime.pkg}))
.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})),
read(`${ROOT}/node_modules/jquery/dist/jquery.min.js`)
@@ -50,8 +55,6 @@ ghu.task('build:demo', runtime => {
ghu.task('build:copy', () => {
return Promise.all([
read(`${VENDOR}/demo/*`)
.then(write(mapfn.p(VENDOR, BUILD), {overwrite: true})),
read(`${ROOT}/*.md`)
.then(write(mapfn.p(ROOT, BUILD), {overwrite: true}))
]);
package-lock.json
Generated
+2548 -2529
View File
File diff suppressed because it is too large Load Diff
package.json
+6 -4
View File
@@ -1,7 +1,7 @@
{
"name": "jquery-qrcode",
"title": "jQuery.qrcode",
"version": "0.15.0",
"version": "0.16.0",
"description": "Generate QR codes dynamically.",
"homepage": "https://larsjung.de/jquery-qrcode/",
"bugs": "https://github.com/lrsjng/jquery-qrcode/issues",
@@ -17,9 +17,11 @@
"url": "https://github.com/lrsjng/jquery-qrcode.git"
},
"devDependencies": {
"eslint": "5.15.1",
"ghu": "0.13.0",
"jquery": "3.3.1"
"@babel/core": "7.4.3",
"@babel/preset-env": "7.4.3",
"eslint": "5.16.0",
"ghu": "0.17.0",
"jquery": "3.4.0"
},
"engines": {
"node": ">=8.0.0"
src/.eslintrc
-9
View File
@@ -1,9 +0,0 @@
---
env:
browser: true
rules:
func-names: 0
no-var: 0
prefer-arrow-callback: 0
strict: 0
src/demo/index.html.pug
+3 -5
View File
@@ -3,13 +3,11 @@ html(lang='en')
head
meta(charset='utf-8')
meta(http-equiv='x-ua-compatible', content='ie=edge')
title #{pkg.title} #{pkg.version} · Demo
meta(name='description', content=`demo for ${pkg.title} (${pkg.homepage})`)
title #{pkg.title} #{pkg.version} Demo
meta(name='description', content=`Demo for ${pkg.title} (${pkg.homepage}).`)
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='//fonts.googleapis.com/css?family=Ubuntu:300,400,700', rel='stylesheet')
script(src='jquery.min.js')
script(src=`../jquery-qrcode-${pkg.version}.js`)
script(src='scripts.js')
src/demo/scripts.js
+72 -70
View File
@@ -1,84 +1,86 @@
(function () {
'use strict';
const WIN = window; // eslint-disable-line no-undef
const JQ = WIN.jQuery;
var jq = window.jQuery;
var guiValuePairs = [
['size', 'px'],
['minversion', ''],
['quiet', ' modules'],
['radius', '%'],
['msize', '%'],
['mposx', '%'],
['mposy', '%']
];
const GUI_VALUE_PAIRS = [
['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 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]));
});
};
function updateQrCode() {
var options = {
render: jq('#render').val(),
ecLevel: jq('#eclevel').val(),
minVersion: parseInt(jq('#minversion').val(), 10),
const update_qrcode = () => {
const options = {
render: JQ('#render').val(),
ecLevel: JQ('#eclevel').val(),
minVersion: parseInt(JQ('#minversion').val(), 10),
fill: jq('#fill').val(),
background: jq('#background').val(),
// fill: jq('#img-buffer')[0],
fill: JQ('#fill').val(),
background: JQ('#background').val(),
text: jq('#text').val(),
size: parseInt(jq('#size').val(), 10),
radius: parseInt(jq('#radius').val(), 10) * 0.01,
quiet: parseInt(jq('#quiet').val(), 10),
text: JQ('#text').val(),
size: parseInt(JQ('#size').val(), 10),
radius: parseInt(JQ('#radius').val(), 10) * 0.01,
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,
mPosX: parseInt(jq('#mposx').val(), 10) * 0.01,
mPosY: parseInt(jq('#mposy').val(), 10) * 0.01,
mSize: parseInt(JQ('#msize').val(), 10) * 0.01,
mPosX: parseInt(JQ('#mposx').val(), 10) * 0.01,
mPosY: parseInt(JQ('#mposy').val(), 10) * 0.01,
label: jq('#label').val(),
fontname: jq('#font').val(),
fontcolor: jq('#fontcolor').val(),
label: JQ('#label').val(),
fontname: JQ('#font').val(),
fontcolor: JQ('#fontcolor').val(),
image: jq('#img-buffer')[0]
image: JQ('#img-buffer')[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)';
JQ('#container').empty().qrcode(options);
};
const update = () => {
update_gui();
update_qrcode();
};
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);
};
jq('#container').empty().qrcode(options);
reader.readAsDataURL(input.files[0]);
}
};
function update() {
updateGui();
updateQrCode();
}
const download = () => {
JQ('#download').attr('href', JQ('#container canvas')[0].toDataURL('image/png'));
};
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]);
}
}
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();
};
function download() {
jq('#download').attr('href', jq('#container canvas')[0].toDataURL('image/png'));
}
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();
}
jq(init);
}());
JQ(init);
src/demo/styles.css
+2 -2
View File
@@ -1,5 +1,5 @@
body {
font-family: 'Ubuntu', 'Arial', 'sans';
font-family: 'Ubuntu', 'sans';
margin: 0;
padding: 0;
text-align: center;
@@ -74,7 +74,7 @@ label {
}
input, textarea, select {
font-family: 'Ubuntu', 'Arial', 'sans';
font-family: 'Ubuntu', 'sans';
display: block;
background-color: #fff;
margin: 2px;
src/jquery-qrcode.js
Vendored
+403 -419
View File
@@ -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);
}
const is_dark = (row, col) => {
row -= quiet;
col -= quiet;
return row >= 0 && row < module_count && col >= 0 && col < module_count && vqr.isDark(row, col);
};
function addBlank(l, t, r, b) {
var prevIsDark = qr.isDark;
var moduleSize = 1 / quietModuleCount;
const add_blank = (l, t, r, b) => {
const prev_is_dark = qr.is_dark;
const module_size = 1 / quiet_module_count;
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.text = text;
qr.level = level;
qr.version = version;
qr.moduleCount = quietModuleCount;
qr.isDark = isDark;
qr.addBlank = addBlank;
return qr;
}
// 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;
}
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.fillStyle = settings.fontcolor;
context.font = font;
context.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * 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);
}
context.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);
}
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);
}
var mode = settings.mode;
if (mode === 1 || mode === 2) {
drawBackgroundLabel(qr, context, settings);
} else if (mode === 3 || mode === 4) {
drawBackgroundImage(qr, context, settings);
}
}
function drawModuleDefault(qr, context, settings, left, top, width, row, col) {
if (qr.isDark(row, col)) {
context.rect(left, top, width, width);
}
}
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 (ne) {
ctx.lineTo(r - rad, t);
ctx.arcTo(r, t, r, b, rad);
} else {
ctx.lineTo(r, t);
}
if (se) {
ctx.lineTo(r, b - rad);
ctx.arcTo(r, b, l, b, rad);
} else {
ctx.lineTo(r, b);
}
if (sw) {
ctx.lineTo(l + rad, b);
ctx.arcTo(l, b, l, t, rad);
} else {
ctx.lineTo(l, b);
}
if (nw) {
ctx.lineTo(l, t + rad);
ctx.arcTo(l, t, r, t, rad);
} else {
ctx.lineTo(l, t);
}
}
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);
}
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 (se) {
ctx.moveTo(r - rad, b);
ctx.lineTo(r, b);
ctx.lineTo(r, b - rad);
ctx.arcTo(r, b, r - rad, b, rad);
}
if (sw) {
ctx.moveTo(l + rad, b);
ctx.lineTo(l, b);
ctx.lineTo(l, b - rad);
ctx.arcTo(l, b, l + rad, b, rad);
}
}
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);
}
}
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;
}
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;
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();
}
}
// 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;
}
var $canvas = jq(canvas).data('qrcode', qr);
var context = $canvas[0].getContext('2d');
drawBackground(qr, context, settings);
drawModules(qr, context, settings);
return $canvas;
}
// 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.
function createImage(settings) {
return jq('<img/>').attr('src', createCanvas(settings)[0].toDataURL('image/png'));
}
// 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;
}
// 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
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);
};
};
var $div = jq('<div/>').data('qrcode', qr).css(containerCSS);
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;
if (settings_bgColor) {
$div.css('background-color', settings_bgColor);
}
return qr;
};
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);
}
}
}
// 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;
};
return $div;
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);
}
function createHTML(settings) {
if (hasCanvas && settings.render === 'canvas') {
return createCanvas(settings);
} else if (hasCanvas && settings.render === 'image') {
return createImage(settings);
}
context.fillStyle = settings.fontcolor;
context.font = font;
context.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size);
};
return createDiv(settings);
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);
}
// Plugin
// ======
context.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);
};
// Default settings
// ----------------
var defaults = {
// render method: `'canvas'`, `'image'` or `'div'`
render: 'canvas',
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);
}
// version range somewhere in 1 .. 40
minVersion: 1,
maxVersion: 40,
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);
}
};
// error correction level: `'L'`, `'M'`, `'Q'` or `'H'`
ecLevel: 'L',
const draw_modules_default = (qr, context, settings, left, top, width, row, col) => {
if (qr.is_dark(row, col)) {
context.rect(left, top, width, width);
}
};
// offset in pixel if drawn onto existing canvas
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);
}
if (ne) {
ctx.lineTo(r - rad, t);
ctx.arcTo(r, t, r, b, rad);
} else {
ctx.lineTo(r, t);
}
if (se) {
ctx.lineTo(r, b - rad);
ctx.arcTo(r, b, l, b, rad);
} else {
ctx.lineTo(r, b);
}
if (sw) {
ctx.lineTo(l + rad, b);
ctx.arcTo(l, b, l, t, rad);
} else {
ctx.lineTo(l, b);
}
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 (ne) {
ctx.moveTo(r - rad, t);
ctx.lineTo(r, t);
ctx.lineTo(r, t + rad);
ctx.arcTo(r, t, r - rad, t, rad);
}
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 (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);
}
};
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 (settings.radius > 0 && settings.radius <= 0.5) {
fn = draw_modules_rounded;
}
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;
fn(qr, context, settings, l, t, w, row, col);
}
}
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();
}
};
// 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;
}
const $canvas = JQ(canvas).data('qrcode', qr);
const 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.
const create_canvas = settings => {
const $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.
const create_img = settings => {
return JQ('<img/>').attr('src', create_canvas(settings)[0].toDataURL('image/png'));
};
// 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;
}
// some shortcuts to improve compression
const settings_size = settings.size;
const settings_bgColor = settings.background;
const math_floor = Math.floor;
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));
let row;
let col;
const container_css = {
position: 'relative',
left: 0,
top: 0,
// size in pixel
size: 200,
// code color or image element
fill: '#000',
// background color or image element, `null` for transparent background
background: null,
// content
text: 'no text',
// corner radius relative to module width: 0.0 .. 0.5
radius: 0,
// quiet zone in modules
quiet: 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,
label: 'no label',
fontname: 'sans',
fontcolor: '#000',
image: null
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
};
// Register the plugin
// -------------------
jq.fn.qrcode = function (options) {
var settings = jq.extend({}, defaults, options);
const $div = JQ('<div/>').data('qrcode', qr).css(container_css);
return this.each(function (idx, el) {
if (el.nodeName.toLowerCase() === 'canvas') {
drawOnCanvas(el, settings);
} else {
jq(el).append(createHTML(settings));
if (settings_bgColor) {
$div.css('background-color', settings_bgColor);
}
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);
}
});
};
}(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 $div;
};
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);
}
return create_div(settings);
};
const DEFAULTS = {
// render method: `'canvas'`, `'image'` or `'div'`
render: 'canvas',
// version range somewhere in 1 .. 40
minVersion: 1,
maxVersion: 40,
// error correction level: `'L'`, `'M'`, `'Q'` or `'H'`
ecLevel: 'L',
// offset in pixel if drawn onto existing canvas
left: 0,
top: 0,
// size in pixel
size: 200,
// code color or image element
fill: '#000',
// background color or image element, `null` for transparent background
background: '#fff',
// content
text: 'no text',
// corner radius relative to module width: 0.0 .. 0.5
radius: 0,
// quiet zone in modules
quiet: 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,
label: 'no label',
fontname: 'sans',
fontcolor: '#000',
image: null
};
JQ.fn.qrcode = module.exports = function main(options) {
const settings = JQ.extend({}, DEFAULTS, options);
return this.each((idx, el) => {
if (el.nodeName.toLowerCase() === 'canvas') {
draw_on_canvas(el, settings);
} else {
JQ(el).append(create_html(settings));
}
});
};
src/vqrcode.js
+2
View File
@@ -0,0 +1,2 @@
// @include "../vendor/qrcode.js"
// @include "../vendor/qrcode_UTF8.js"