Improvements and solved issues

papnkukn · Oct 29, 2019 · 47d56ec · 47d56ec
1 parent d71a8f0
commit 47d56ec
Show file tree

Hide file tree

Showing 9 changed files with 484 additions and 89 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,33 +1,39 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
-node_modules
-
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
+# Test
+samples/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+node_modules
+
+# npm
+package-lock.json
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
diff --git a/README.md b/README.md
@@ -28,7 +28,7 @@ var qrcode = new QRCode({
   height: 256,
   color: "#000000",
   background: "#ffffff",
-  ecl: "M"
+  ecl: "M",
 });
 qrcode.save("sample.svg", function(error) {
   if (error) throw error;
@@ -39,16 +39,44 @@ qrcode.save("sample.svg", function(error) {
 ## Options
 
 **List of options:**
-* **content** - QR Code content, required
+* **content** - QR Code content, the only **required** parameter
 * **padding** - white space padding, `4` modules by default, `0` for no border
 * **width** - QR Code width in pixels
 * **height** - QR Code height in pixels
-* **color** - color of modules, color name or hex string, e.g. `#000000`
+* **color** - color of modules (squares), color name or hex string, e.g. `#000000`
 * **background** - color of background, color name or hex string, e.g. `white`
 * **ecl** - error correction level: `L`, `M`, `H`, `Q`
+* **join** - join modules (squares) into one shape, into the SVG `path` element, **recommended** for web and responsive use, default: `false`
+* **predefined** - to create a squares as pattern, then populate the canvas, default: `false`, see the output examples below
+* **pretty** - apply indents and new lines, default: `true`
+* **swap** - swap X and Y modules, only if you have issues with some QR readers, default: `false`
+* **xmlDeclaration** - prepend XML declaration to the SVG document, i.e. `<?xml version="1.0" standalone="yes"?>`, default: `true`
+* **container** - wrapping element, default: `svg`, see below
 
-### SVG output
+**Container options:**
+* **svg** - populate squares in a SVG document with `width` and `height` attriute, recommended for converting to raster images or PDF where QR Code is being static (exact size)
+* **svg-viewbox** - populate squares in a SVG document with `viewBox` attriute, **recommended** for responsive web pages
+* **g** - put squares in `g` element, useful when you need to put multiple QR Codes in a single SVG document
+* **none** - no wrapper
 
+## SVG output
+
+### Editable squares
+
+This mode is useful for designers to manipulate with particular squares.
+Thus, one can open the QR Code in an editor, select particular modules, move around, change color, etc.
+However, some old SVG viewers may generate minor gaps between the squares - the side effect when rendering an image at certain zoom level.
+
+Default options
+```javascript
+var qrcode = new QRCode({
+  content: "Pretty Fox",
+  join: false,
+  predefined: false
+});
+```
+
+Output with `rect` elements
 ```xml
 <?xml version="1.0" standalone="yes"?>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256">
@@ -60,6 +88,58 @@ qrcode.save("sample.svg", function(error) {
 </svg>
 ```
 
+### Responsive web page
+
+Squares joined into one `path` shape produce a compact file size, i.e. 4-5x reduced compared with `rect` elements.
+A single `path` element will result in an optimized rendering, thus not producing any minor gaps between the squares.
+Also using the container with `viewBox` attribute may contribute to the responsive scaling on the web.
+
+Set `join` to `true`
+```javascript
+var qrcode = new QRCode({
+  content: "Pretty Fox",
+  join: true,
+  container: "svg-viewbox" //Useful but not required
+});
+```
+
+Output with `path` element
+```xml
+<?xml version="1.0" standalone="yes"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
+  <rect x="0" y="0" width="256" height="256" style="fill:beige;shape-rendering:crispEdges;"/>
+  <path x="0" y="0" style="fill:blue;shape-rendering:crispEdges;" d="M35.31,35.31 V44.14 H44.14 V35.31 H35.31 Z..." />
+</svg>
+```
+
+### Predefined pattern
+
+Algorithm defines the square pattern once before populating a canvas. Useful if you want to generate QR Code with candies.
+However, some SVG software and converters do not support `defs` or `use` elements.
+
+Set `predefined` to `true`
+```javascript
+var qrcode = new QRCode({
+  content: "Pretty Fox",
+  predefined: true
+});
+```
+
+Output with `defs` and `use` elements
+```xml
+<?xml version="1.0" standalone="yes"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256">
+  <defs><path id="qrmodule" d="M0 0 h8.827586206896552 v8.827586206896552 H0 z" style="fill:maroon;shape-rendering:crispEdges;" /></defs>
+  <rect x="0" y="0" width="256" height="256" style="fill:beige;shape-rendering:crispEdges;"/>
+  <use x="35.310344827586206" y="35.310344827586206" href="#qrmodule" />
+  <use x="44.13793103448276" y="35.310344827586206" href="#qrmodule" />
+  <use x="52.96551724137931" y="35.310344827586206" href="#qrmodule" />
+  <use x="61.79310344827586" y="35.310344827586206" href="#qrmodule" />
+  <use x="70.62068965517241" y="35.310344827586206" href="#qrmodule" />
+  ...
+</svg>
+```
+
 ## Command Line
 
 ```
@@ -68,21 +148,27 @@ Usage:
 
 Options:
   --help                 Print this message
-  --padding [value]      Offset in number of modules
-  --width [px]           Image width in pixels
-  --height [px]          Image height in pixels
-  --color [color]        Foreground color, hex or name
+  --version, -v          Print version number
+  --padding , -p [value] Offset in number of modules
+  --width, -w [px]       Image width in pixels
+  --height, -h [px]      Image height in pixels
+  --color, -fg [color]   Foreground color, hex or name
   --background [color]   Background color, hex or name
   --ecl [value]          Error correction level: L, M, H, Q
-  -o [file]              Output file name
-  -f                     Force overwrite
-  -v                     Print version number
+  --join                 Join modules into one SVG path, i.e. for crisp rendering
+  --predefined           Use 'defs' and 'use' elements in SVG, i.e. for compact output
+  --no-prettify          Avoid indenting and new lines in SVG, i.e. for compact output
+  --viewbox              Use 'viewBox' instead of 'width' and 'height' attributes
+  --swap-fix             Swap X and Y modules to fix issues with some QR readers
+  --output, -o [file]    Output file name
+  --force, -f            Force overwrite
 
 Examples:
   qrcode-svg http://github.com
   qrcode-svg -f -o hello.svg "Hello World"
+  qrcode-svg -p 4 -w 256 -h 256 --join --viewbox "Responsive..."
   qrcode-svg --padding 2 --width 120 --height 120 "Little fox..."
-  qrcode-svg --color blue --background #ececec "...jumps over"
+  qrcode-svg --color blue --background #ececec "...jumps over" 
 ```
 
 ## Usage Scenarios
@@ -163,7 +249,11 @@ Use on a HTML page with JavaScript
 <div id="container"></div>
 <script src="dist/qrcode.min.js"></script>
 <script>
-var qrcode = new QRCode("Hello World!");
+var qrcode = new QRCode({
+  content: "Hello World!",
+  container: "svg-viewbox", //Responsive use
+  join: true //Crisp rendering and 4-5x reduced file size
+});
 var svg = qrcode.svg();
 document.getElementById("container").innerHTML = svg;
 </script>
@@ -177,6 +267,8 @@ Thanks to [davidshimjs](https://github.com/davidshimjs/qrcodejs) for the base li
 
 Thanks to [Kazuhiko Arase](http://www.d-project.com/) for the original QR Code in JavaScript algorithm.
 
+Thanks to all contributors on the GitHub.
+
 ## Legal notice
 
 ```

diff --git a/app.js b/app.js
@@ -16,23 +16,33 @@ for (var i = 0; i < args.length; i++) {
       help();
       process.exit(0);
       break;
-
+
+    //Padding in number of modules
+    case "-p":
     case "--padding":
       config.padding = parseFloat(args[++i]);
       break;
-
+
+    //Width in pixels    
+    case "-w":
     case "--width":
       config.width = parseFloat(args[++i]);
       break;
 
+    //Height in pixels
+    case "-h":
     case "--height":
       config.height = parseFloat(args[++i]);
       break;
-
+
+    //Foreground color    
+    case "-fg":
     case "--color":
       config.color = args[++i];
       break;
-
+
+    //Background color
+    case "-bg":
     case "--background":
       config.background = args[++i];
       break;
@@ -41,15 +51,38 @@ for (var i = 0; i < args.length; i++) {
       config.ecl = args[++i];
       break;
 
+    case "--join":
+      config.join = true;
+      break;
+
+    case "--predefined":
+      config.predefined = true;
+      break;
+
+    case "--viewbox":
+      config.container = "svg-viewbox";
+      break;
+
+    case "--no-prettify":
+      config.pretty = false;
+      break;
+
+    case "--swap-fix":
+      config.swap = true;
+      break;
+
     case "-f":
+    case "--force":
       config.force = true;
       break;
 
     case "-o":
+    case "--output":
       config.outputFile = args[++i];
       break;
 
     case "-v":
+    case "--version":
       console.log(require('./package.json').version);
       process.exit(0);
       break;
@@ -73,19 +106,25 @@ function help() {
   console.log("");
   console.log("Options:");
   console.log("  --help                 Print this message");
-  console.log("  --padding [value]      Offset in number of modules");
-  console.log("  --width [px]           Image width in pixels");
-  console.log("  --height [px]          Image height in pixels");
-  console.log("  --color [color]        Foreground color, hex or name");
+  console.log("  --version, -v          Print version number");
+  console.log("  --padding , -p [value] Offset in number of modules");
+  console.log("  --width, -w [px]       Image width in pixels");
+  console.log("  --height, -h [px]      Image height in pixels");
+  console.log("  --color, -fg [color]   Foreground color, hex or name");
   console.log("  --background [color]   Background color, hex or name");
   console.log("  --ecl [value]          Error correction level: L, M, H, Q");
-  console.log("  -o [file]              Output file name");
-  console.log("  -f                     Force overwrite");
-  console.log("  -v                     Print version number");
+  console.log("  --join                 Join modules into one SVG path, i.e. for crisp rendering");
+  console.log("  --predefined           Use 'defs' and 'use' elements in SVG, i.e. for compact output");
+  console.log("  --no-prettify          Avoid indenting and new lines in SVG, i.e. for compact output");
+  console.log("  --viewbox              Use 'viewBox' instead of 'width' and 'height' attributes");
+  console.log("  --swap-fix             Swap X and Y modules to fix issues with some QR readers");
+  console.log("  --output, -o [file]    Output file name");
+  console.log("  --force, -f            Force overwrite");
   console.log("");
   console.log("Examples:");
   console.log("  qrcode-svg http://github.com");
   console.log("  qrcode-svg -f -o hello.svg \"Hello World\"");
+  console.log("  qrcode-svg -p 4 -w 256 -h 256 --join --viewbox \"Responsive...\"");
   console.log("  qrcode-svg --padding 2 --width 120 --height 120 \"Little fox...\"");
   console.log("  qrcode-svg --color blue --background #ececec \"...jumps over\"");
 }

diff --git a/dist/qrcode.min.js b/dist/qrcode.min.js
diff --git a/examples/index.html b/examples/index.html
@@ -4,7 +4,7 @@
 <div id="container"></div>
 <script src="../lib/qrcode.js"></script>
 <script>
-var qrcode = new QRCode("Hello World!");
+var qrcode = new QRCode({ content: "Hello World!", join: true });
 var svg = qrcode.svg();
 document.getElementById("container").innerHTML = svg;
 </script>