Release 1.8.0

werthdavid · Aug 7, 2019 · ea0c088 · ea0c088
1 parent 737316b
commit ea0c088
Show file tree

Hide file tree

Showing 18 changed files with 1,317 additions and 1,171 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 [![Dependency Status](https://david-dm.org/werthdavid/kjua-svg.svg)](https://david-dm.org/werthdavid/kjua-svg)
 [![Downloads](https://img.shields.io/npm/dm/kjua-svg.svg)](https://npmjs.org/package/kjua-svg)
 
-<img align="right" src="https://raw.githubusercontent.com/werthdavid/ngx-kjua/master/docs/readme-logo.png"/>
+<img align="right" src="https://raw.githubusercontent.com/werthdavid/kjua/master/docs/readme-logo.svg"/>
 
 # kjua-svg
 
@@ -25,15 +25,39 @@ Click [here](https://werthdavid.github.io/kjua/)
 
 ## Options
 
+### Crisp
+
+As you can set the size of the image, the amount of 'modules' (black/white boxes that make up the QR-code) is calculated based on the size and the amount of `quiet` modules. The calculation can result in an odd number so that a module is e.g. 4.5 pixels big. The resulting image will be drawn fuzzy if `crisp` is set to false. Setting it to `true` will result in 'sharp' lines.
+
+#### crisp false
+<img src="https://raw.githubusercontent.com/werthdavid/kjua/master/docs/no-crisp.jpg"/>
+
+#### crisp true
+<img src="https://raw.githubusercontent.com/werthdavid/kjua/master/docs/crisp.jpg"/>
+
+
+### Label
+Kjua lets you embed a text or image to the code. This can be set with the setting `mode`.
+This can reduce the readability of the code!
+
+### Image
+<img src="https://raw.githubusercontent.com/werthdavid/kjua/master/docs/image.png"/>
+
+### Image as Code
+<img src="https://raw.githubusercontent.com/werthdavid/kjua/master/docs/image-as-code.png"/>
+
+
+### All options
+
 * `text` encoded content (defaults to ``)
 * `render` render-mode: 'image', 'canvas', 'svg' (defaults to `image`)
 * `crisp` render pixel-perfect lines (defaults to `true`)
-* `minVersion` minimum version: 1..40(defaults to `1`)
+* `minVersion` minimum version: 1..40 (defaults to `1`)
 * `ecLevel` error correction level: 'L', 'M', 'Q' or 'H' (defaults to `L`)
 * `size` size in pixel (defaults to `200`)
 * `fill` code color (defaults to `#333`)
-* `back` background color (defaults to `#fff`)
-* `rounded` roundend corners in pc: 0..100 (defaults to `0`, not working if `render`is set to 'svg')
+* `back` background color (defaults to `#fff`, for transparent use `''` or `null`)
+* `rounded` roundend corners in pc: 0..100 (defaults to `0`, not working if `render`is set to `svg`)
 * `quiet` quiet zone in modules (defaults to `0`)
 * `mode` modes: 'plain', 'label' or 'image' (defaults to `plain`, set `label` or `image` property if you change this)
 * `mSize` label/image size in pc: 0..100 (defaults to `30`)
@@ -43,14 +67,20 @@ Click [here](https://werthdavid.github.io/kjua/)
 * `fontname` font for additional label text (defaults to `sans-serif`)
 * `fontcolor` font-color for additional label text (defaults to `#333`)
 * `image` additional image (defaults to `undefined`, use an HTMLImageElement or base64-string)
+* `imageAsCode` draw the image as part of the code (defaults to `false`)
 
 More details can be found on [larsjung.de/kjua](https://larsjung.de/kjua/)
 
 ## Differences to kjua
 
-This is basically just a fork of kjua that adds the possibility to render QR-codes as SVG.
+* possibility to render QR-codes as SVG
+* transparent background support
+* image can be provided as base64-string
+* Typescript-types
+* draw the image as part of the code --> `imageAsCode`
 
 ## Limitations
 
 Some options do not work when the code is rendered as SVG. These are:
 * rounded
+* when rendering SVG an embedded text doesn't have an outline like in canvas mode
diff --git a/docs/crisp.jpg b/docs/crisp.jpg
diff --git a/docs/image-as-code.png b/docs/image-as-code.png
diff --git a/docs/image.png b/docs/image.png
diff --git a/docs/index.html b/docs/index.html
@@ -51,7 +51,7 @@
         <option value="image">image</option>
     </select>
     <hr>
-    <label for="msize">SIZE:</label><input id="msize" max="40" min="0" step="1" type="range" value="30"><label for="mposx">POS X:</label><input id="mposx" max="100" min="0" step="1" type="range"
+    <label for="msize">SIZE:</label><input id="msize" max="100" min="0" step="1" type="range" value="30"><label for="mposx">POS X:</label><input id="mposx" max="100" min="0" step="1" type="range"
                                                                                                                                                 value="50"><label for="mposy">POS Y:</label><input
     id="mposy" max="100" min="0" step="1" type="range" value="50">
     <hr>
@@ -60,6 +60,7 @@
     <hr>
     <label for="image">IMAGE</label><input id="image" type="file">
     <label for="image-text">IMAGE-TEXT</label><input id="image-text" type="text">
+    <label for="image-as-code">IMAGE-AS-CODE</label><input id="image-as-code" type="checkbox">
 </div>
 <img id="img-buffer" src="dummy.png">
 </div>

diff --git a/docs/kjua.min.js b/docs/kjua.min.js
diff --git a/docs/no-crisp.jpg b/docs/no-crisp.jpg
diff --git a/docs/readme-logo.svg b/docs/readme-logo.svg
diff --git a/docs/scripts.js b/docs/scripts.js
@@ -24,6 +24,11 @@
         return el && el.value;
     }
 
+    function checked_by_id(id) {
+        var el = el_by_id(id);
+        return el && el.checked;
+    }
+
     function int_by_id(id) {
         return parseInt(val_by_id(id), 10);
     }
@@ -86,6 +91,8 @@
             fontname: val_by_id('font'),
             fontcolor: val_by_id('fontcolor'),
 
+            imageAsCode: checked_by_id('image-as-code'),
+
             image
         };
 

diff --git a/kjua.d.ts b/kjua.d.ts
@@ -0,0 +1,88 @@
+declare function kjua(options: KjuaOptions);
+
+export interface KjuaOptions {
+    /**
+     * Render the image as either SVG, canvas or PNG-image
+     */
+    render?: 'image' | 'svg' | 'canvas';
+
+    /**
+     * render pixel-perfect lines
+     */
+    crisp?: boolean;
+
+    /**
+     * minimum version: 1..40
+     */
+    minVersion?: number;
+
+    /**
+     * error correction level: 'L', 'M', 'Q' or 'H'
+     */
+    ecLevel?: 'L' | 'M' | 'Q' | 'H';
+
+    /**
+     * size in pixel
+     */
+    size?: number;
+
+    /**
+     * pixel-ratio, null for devicePixelRatio
+     */
+    ratio?: number | null;
+
+    /**
+     * code color
+     */
+    fill?: string;
+
+    /**
+     * background color
+     */
+    back?: string;
+
+    /**
+     * content
+     */
+    text?: string;
+
+    /**
+     * roundend corners in pc: 0..100
+     */
+    rounded?: number;
+
+    /**
+     * quiet zone in modules
+     */
+    quiet?: number;
+
+    /**
+     * modes: 'plain', 'label' or 'image'
+     */
+    mode?: 'plain' | 'label' | 'image';
+
+    /**
+     * label/image size and pos in pc: 0..100
+     */
+    mSize?: number;
+    mPosX?: number;
+    mPosY?: number;
+
+    /**
+     * label
+     */
+    label?: string;
+    fontname?: string;
+    fontcolor?: string;
+    fontoutline?: boolean;
+
+    /**
+     * image element
+     */
+    image?: null | HTMLImageElement | string;
+
+    /**
+     * draw the image as part of the code
+     */
+    imageAsCode?: boolean;
+}