Update.

Author: lrsjng

dist/kjua.min.js

@@ -1,6 +1,6 @@
 {
   "name": "kjua",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Dynamically generated QR codes for modern browsers.",
   "homepage": "https://larsjung.de/kjua/",
   "author": "Lars Jung <lrsjng@gmail.com> (https://larsjung.de)",

package-lock.json

@@ -2,11 +2,10 @@ doctype html
 html(lang='en')
     head
         meta(charset='utf-8')
-        meta(http-equiv='x-ua-compatible', content='ie=edge')
         title #{pkg.name} #{pkg.version} · Demo
         meta(name='description', content=`demo for ${pkg.name} (${pkg.homepage})`)
         meta(name='viewport', content='width=device-width, initial-scale=1')
-        link(href='//fonts.googleapis.com/css?family=Ubuntu', rel='stylesheet')
+        link(href='//fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap' rel='stylesheet')
         link(href='styles.css', rel='stylesheet')
         script(src=`../${pkg.name}-${pkg.version}.min.js`)
         script(src='scripts.js')
@@ -35,7 +34,7 @@ html(lang='en')
             input#fill(type='color', value='#333333')
             label(for='back') BACK
             input#back(type='color', value='#ffffff')
-            label(for='text') CONTENT
+            label(for='text') TEXT
             textarea#text #{pkg.homepage}
 
             hr
@@ -61,7 +60,7 @@ html(lang='en')
 
             hr
             label(for='msize') SIZE:
-            input#msize(type='range', value='30', min='0', max='40', step='1')
+            input#msize(type='range', value='20', min='0', max='40', step='1')
             label(for='mposx') POS X:
             input#mposx(type='range', value='50', min='0', max='100', step='1')
             label(for='mposy') POS Y:
@@ -71,7 +70,7 @@ html(lang='en')
             label(for='label') LABEL
             input#label(type='text', value=pkg.name)
             label(for='font') FONT NAME
-            input#font(type='text', value='Ubuntu')
+            input#font(type='text', value='Ubuntu Mono')
             label(for='fontcolor') FONT COLOR
             input#fontcolor(type='color', value='#ff9818')
 

package.json

@@ -4,7 +4,7 @@
 }
 
 body {
-    font-family: 'Ubuntu', 'Arial', 'sans';
+    font-family: 'Ubuntu Mono', 'monospace';
     text-align: center;
     background: repeat url('back.png');
 }
@@ -59,13 +59,14 @@ hr {
 }
 
 label {
-    font-size: 10px;
-    color: #aaa;
-    padding: 12px 4px 0 4px;
+    display: block;
+    font-size: 12px;
+    color: #555;
+    padding: 12px 4px 4px 4px;
 }
 
 input, textarea, select {
-    font-family: 'Ubuntu', 'Arial', 'sans';
+    font-family: 'Ubuntu Mono', 'monospace';
     display: block;
     background-color: #fff;
     margin: 2px;

src/demo/index.html.pug

@@ -3,7 +3,7 @@ const qrcode = require('./lib/qrcode');
 const create_canvas_qrcode = require('./lib/create_canvas_qrcode');
 const create_svg_qrcode = require('./lib/create_svg_qrcode');
 
-module.exports = options => {
+const kjua = options => {
     const settings = Object.assign({}, defaults, options);
     const qr = qrcode(settings.text, settings.ecLevel, settings.minVersion, settings.quiet);
 
@@ -12,3 +12,11 @@ module.exports = options => {
     }
     return create_canvas_qrcode(qr, settings, settings.render === 'image');
 };
+
+module.exports = kjua;
+
+/* eslint-disable */ try {
+    jQuery.fn.kjua = function (options) {
+        return this.each((idx, el) => el.appendChild(kjua(options)));
+    };
+} catch (e) {} /* eslint-enable */

src/demo/styles.css

@@ -1,4 +1,4 @@
-const {create_canvas, canvas_to_img, dpr} = require('./dom');
+const dom = require('./dom');
 const draw_module_rounded = require('./draw_rounded');
 const draw_mode = require('./draw_mode');
 
@@ -49,13 +49,13 @@ const draw = (qr, ctx, settings) => {
 };
 
 const create_canvas_qrcode = (qr, settings, as_image) => {
-    const ratio = settings.ratio || dpr;
-    const canvas = create_canvas(settings.size, ratio);
+    const ratio = settings.ratio || dom.dpr;
+    const canvas = dom.create_canvas(settings.size, ratio);
     const context = canvas.getContext('2d');
 
     context.scale(ratio, ratio);
     draw(qr, context, settings);
-    return as_image ? canvas_to_img(canvas) : canvas;
+    return as_image ? dom.canvas_to_img(canvas) : canvas;
 };
 
 module.exports = create_canvas_qrcode;

src/kjua.js

@@ -1,4 +1,4 @@
-const {create_svg_el, get_attr} = require('./dom');
+const {SVG_NS, get_attr, create_svg_el} = require('./dom');
 
 const create_draw_ctx = ctx => {
     const rnd = x => Math.round(x * 10) / 10;
@@ -116,9 +116,9 @@ const add_label = (el, settings) => {
     const size = settings.size;
     const font = 'bold ' + settings.mSize * 0.01 * size + 'px ' + settings.fontname;
 
-    const {create_canvas, dpr} = require('./dom');
-    const ratio = settings.ratio || dpr;
-    const ctx = create_canvas(size, ratio).getContext('2d');
+    const dom = require('./dom');
+    const ratio = settings.ratio || dom.dpr;
+    const ctx = dom.create_canvas(size, ratio).getContext('2d');
     ctx.strokeStyle = settings.back;
     ctx.lineWidth = settings.mSize * 0.01 * size * 0.1;
     ctx.fillStyle = settings.fontcolor;
@@ -176,7 +176,7 @@ const create_svg_qrcode = (qr, settings) => {
     const mode = settings.mode;
 
     const svg_el = create_svg_el('svg', {
-        xmlns: 'http://www.w3.org/2000/svg',
+        xmlns: SVG_NS,
         width: size,
         height: size,
         viewBox: `0 0 ${size} ${size}`

src/lib/create_canvas_qrcode.js

@@ -38,9 +38,11 @@ const canvas_to_img = canvas => {
 };
 
 module.exports = {
-    create_svg_el,
+    dpr,
+    SVG_NS,
     get_attr,
+    create_el,
+    create_svg_el,
     create_canvas,
-    canvas_to_img,
-    dpr
+    canvas_to_img
 };