Add Label & image

werthdavid · Jul 30, 2019 · e5fa327 · e5fa327
1 parent 639f794
commit e5fa327
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 33 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@
 
 # IDEs and editors
 /.idea
+dist/
 .project
 .classpath
 .c9/

diff --git a/dist/kjua.min.js b/dist/kjua.min.js
diff --git a/docs/index.html b/docs/index.html
@@ -3,39 +3,39 @@
 <head>
     <meta charset="utf-8">
     <meta content="ie=edge" http-equiv="x-ua-compatible">
-    <title>kjua-svg 1.6.0 · Demo</title>
+    <title>kjua-svg · Demo</title>
     <meta content="demo for kjua (https://larsjung.de/kjua/)" name="description">
     <meta content="width=device-width, initial-scale=1" name="viewport">
     <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
     <link href="styles.css" rel="stylesheet">
-    <script src="kjua.min.js"></script>
+    <script src="../dist/kjua.min.js"></script>
     <script src="scripts.js"></script>
 </head>
 <body>
 <div id="container"></div>
-<div class="control left"><a href="https://larsjung.de/kjua/" id="banner">kjua-svg 1.6.0</a>
+<div class="control left"><a href="https://github.com/werthdavid/kjua" id="banner">kjua-svg</a>
     <hr>
     <label for="render">RENDER MODE</label><select id="render">
-        <option selected="selected" value="canvas">canvas</option>
+        <option selected="selected" value="svg">SVG</option>
+        <option value="canvas">canvas</option>
         <option value="image">image</option>
-        <option value="svg">SVG</option>
     </select><label for="crisp">CRISP</label><select id="crisp">
         <option selected="selected" value="true">true</option>
         <option value="false">false</option>
     </select>
     <hr>
     <label for="size">SIZE:</label><input id="size" max="1000" min="100" step="50" type="range" value="400">
     <label for="fill">FILL</label><input id="fill" type="color" value="#333333"><label
-        for="back">BACK</label><input id="back" type="color" value="#ffffff"><label for="text">CONTENT</label><textarea id="text">https://larsjung.de/kjua/</textarea>
+        for="back">BACK</label><input id="back" type="color" value="#ffffff"><label for="text">CONTENT</label><textarea id="text">https://github.com/werthdavid/kjua</textarea>
     <hr>
     <label for="minversion">MIN VERSION:</label><input id="minversion" max="10" min="1" step="1" type="range" value="1"><label for="eclevel">ERROR CORRECTION LEVEL</label><select id="eclevel">
         <option value="L">L - low (7%)</option>
         <option value="M">M - medium (15%)</option>
         <option value="Q">Q - quartile (25%)</option>
         <option selected="selected" value="H">H - high (30%)</option>
-    </select><label for="quiet">QUIET ZONE:</label><input id="quiet" max="40" min="0" step="1" type="range" value="1"><label for="rounded">ROUNDED CORNERS:</label><input id="rounded" max="100"
-                                                                                                                                                                         min="0" step="10" type="range"
-                                                                                                                                                                         value="100"></div>
+    </select>
+    <label for="quiet">QUIET ZONE:</label><input id="quiet" max="40" min="0" step="1" type="range" value="1">
+    <label for="rounded">ROUNDED CORNERS:</label><input id="rounded" max="100" min="0" step="10" type="range" value="0"></div>
 <div class="control right"><label for="mode">MODE</label><select id="mode">
     <option value="plain">plain</option>
     <option selected="selected" value="label">label</option>

diff --git a/docs/scripts.js b/docs/scripts.js
@@ -86,10 +86,8 @@
 
         var container = el_by_id('container');
         var qrcode = kjua(options);
-        for_each(container.childNodes, function (child) {
-            container.removeChild(child);
-        });
-        if (qrcode) {
+        container.innerHTML = "";
+        if (!!qrcode) {
             container.appendChild(qrcode);
         }
     }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kjua-svg",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "Dynamically generated QR codes for modern browsers.",
   "homepage": "https://github.com/werthdavid/kjua",
   "bugs": "https://github.com/werthdavid/kjua/issues",

diff --git a/src/lib/dom.js b/src/lib/dom.js
@@ -14,7 +14,7 @@ const create_canvas = (size, ratio) => {
     return canvas;
 };
 
-const canvas_to_img = canvas => {
+const canvas_to_img = (canvas) => {
     const img = create('img');
     set_attr(img, 'crossorigin', 'anonymous');
     set_attr(img, 'src', canvas.toDataURL('image/png'));
@@ -25,8 +25,24 @@ const canvas_to_img = canvas => {
     return img;
 };
 
+const calc_image_pos = (settings) => {
+    const size = settings.size;
+    const w = settings.image.naturalWidth || 1;
+    const h = settings.image.naturalHeight || 1;
+    const sh = settings.mSize * 0.01;
+    const sw = sh * w / h;
+    const sl = (1 - sw) * settings.mPosX * 0.01;
+    const st = (1 - sh) * settings.mPosY * 0.01;
+    const x = sl * size;
+    const y = st * size;
+    const iw = sw * size;
+    const ih = sh * size;
+    return {x, y, iw, ih};
+};
+
 module.exports = {
     create_canvas,
     canvas_to_img,
+    calc_image_pos,
     dpr
 };
diff --git a/src/lib/draw_mode.js b/src/lib/draw_mode.js
@@ -1,3 +1,5 @@
+const {calc_image_pos} = require('./dom');
+
 const draw_label = (ctx, settings) => {
     const size = settings.size;
     const font = 'bold ' + settings.mSize * 0.01 * size + 'px ' + settings.fontname;
@@ -20,19 +22,8 @@ const draw_label = (ctx, settings) => {
 };
 
 const draw_image = (ctx, settings) => {
-    const size = settings.size;
-    const w = settings.image.naturalWidth || 1;
-    const h = settings.image.naturalHeight || 1;
-    const sh = settings.mSize * 0.01;
-    const sw = sh * w / h;
-    const sl = (1 - sw) * settings.mPosX * 0.01;
-    const st = (1 - sh) * settings.mPosY * 0.01;
-    const x = sl * size;
-    const y = st * size;
-    const iw = sw * size;
-    const ih = sh * size;
-
-    ctx.drawImage(settings.image, x, y, iw, ih);
+    const imagePos = calc_image_pos(settings);
+    ctx.drawImage(settings.image, imagePos.x, imagePos.y, imagePos.iw, imagePos.ih);
 };
 
 const draw_mode = (ctx, settings) => {

diff --git a/src/lib/draw_svg.js b/src/lib/draw_svg.js
@@ -1,15 +1,76 @@
+const {create_canvas, dpr, calc_image_pos} = require('./dom');
+
 const draw_svg = (svgText, settings) => {
     const container = document.createElement("div");
     container.innerHTML = svgText;
+    const svgElem = container.children.item(0);
+    const rectElem = svgElem.children.item(0);
+    const pathElem = svgElem.children.item(1);
+
+    svgElem.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    // In crisp mode, it is possible that the SVG is not exactly 400px --> fix this
+    if (settings.crisp) {
+        svgElem.setAttribute("width", settings.size + "px");
+        svgElem.setAttribute("height", settings.size + "px");
+        svgElem.setAttribute("viewBox", "0 0 " + settings.size + " " + settings.size);
+    }
     // Rect --> background-color
     if (!!settings.back) {
-        container.children.item(0).children.item(0).setAttribute("fill", settings.back);
+        rectElem.setAttribute("fill", settings.back);
     }
     // Path --> foreground-color
     if (!!settings.fill) {
-        container.children.item(0).children.item(1).setAttribute("fill", settings.fill);
+        pathElem.setAttribute("fill", settings.fill);
+    }
+    if (settings.mode === "label") {
+        const textElem = document.createElementNS("http://www.w3.org/2000/svg", "text");
+        const tspanElem = document.createElementNS(null, "tspan");
+        tspanElem.textContent = settings.label;
+
+        const rect = calc_text_pos(settings);
+        tspanElem.setAttributeNS(null, "x", rect.x.toString());
+        tspanElem.setAttributeNS(null, "y", rect.y.toString());
+        textElem.setAttributeNS(null, "fill", settings.fontcolor);
+        textElem.setAttributeNS(null, "font-family", settings.fontname);
+        textElem.setAttributeNS(null, "font-size", settings.mSize * 0.01 * settings.size + "px");
+        textElem.appendChild(tspanElem);
+        svgElem.appendChild(textElem);
+    } else if (settings.mode === "image") {
+        const imageElem = document.createElementNS(null, "image");
+        const imagePos = calc_image_pos(settings);
+        imageElem.setAttributeNS(null, "width", imagePos.iw);
+        imageElem.setAttributeNS(null, "height", imagePos.ih);
+        imageElem.setAttributeNS(null, "x", imagePos.x);
+        imageElem.setAttributeNS(null, "y", imagePos.y);
+        imageElem.setAttribute("xlink:href", settings.image.getAttribute("src"));
+        svgElem.appendChild(imageElem);
     }
-    return container.children.item(0);
+    return svgElem;
+};
+
+const calc_text_pos = (settings) => {
+    const ratio = settings.ratio || dpr;
+    const canvas = create_canvas(settings.size, ratio);
+    const context = canvas.getContext('2d');
+    context.scale(ratio, ratio);
+
+    const size = settings.size;
+    const font = 'bold ' + settings.mSize * 0.01 * size + 'px ' + settings.fontname;
+
+    context.strokeStyle = settings.back;
+    context.lineWidth = settings.mSize * 0.01 * size * 0.1;
+    context.fillStyle = settings.fontcolor;
+    context.font = font;
+
+    const w = context.measureText(settings.label).width;
+    const sh = settings.mSize * 0.01;
+    const sw = w / size;
+    const sl = (1 - sw) * settings.mPosX * 0.01;
+    const st = (1 - sh) * settings.mPosY * 0.01;
+    const x = sl * size;
+    const y = st * size + 0.75 * settings.mSize * 0.01 * size;
+    return {x, y};
 };
 
 module.exports = draw_svg;
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ @@
     # IDEs and editors
     /.idea
+    dist/
     .project
     .classpath
     .c9/
@@ Expand Down @@