@liquid-js/qr-code-styling 2.0.4 → 2.1.0

package/README.md

@@ -31,52 +31,33 @@ If you have issues / suggestions / notes / questions, please open an issue or co
   </head>
   <body>
     <div id="canvas"></div>
+    <button type="button" id="dl">Download</button>
     <script type="module">
-      import { QRCodeStyling } from "https://unpkg.com/@liquid-js/qr-code-styling/lib/qr-code-styling.js";
+      import { QRCodeStyling, browserUtils } from "./index.ts";
 
-      const options = {
-        shape: "circle",
+      const qrCode = new QRCodeStyling({
+        width: 300,
+        height: 300,
         type: "svg",
-        data: "h",
+        data: "https://www.facebook.com/",
         image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
         dotsOptions: {
-          type: "extra-rounded",
-          gradient: {
-            type: "linear",
-            rotation: Math.PI / 2,
-            colorStops: [
-              { offset: 0, color: "blue" },
-              { offset: 0.5, color: "red" },
-              { offset: 1, color: "green" }
-            ]
-          }
+          color: "#4267b2",
+          type: "rounded"
         },
-        cornersSquareOptions: {
-          type: "rounded",
-          gradient: {
-            type: "linear",
-            rotation: Math.PI * 0.2,
-            colorStops: [
-              {
-                offset: 0,
-                color: "blue"
-              },
-              {
-                offset: 1,
-                color: "red"
-              }
-            ]
-          }
+        backgroundOptions: {
+          color: "#e9ebee"
         },
         imageOptions: {
           crossOrigin: "anonymous",
-          imageSize: 1,
-          margin: 1
+          margin: 20
         }
-      };
-      const qrCode = new QRCodeStyling(options);
+      });
 
       qrCode.append(document.getElementById("canvas"));
+      document.getElementById("dl").addEventListener("click", () => {
+        browserUtils.download(qrCode, { extension: "png" }, { width: 1200, height: 1200 });
+      });
     </script>
   </body>
 </html>

package/lib/qr-code-styling-node.js

@@ -131,6 +131,8 @@ function sanitizeOptions(options) {
     if (newOptions.dotsOptions.gradient) {
         newOptions.dotsOptions.gradient = sanitizeGradient(newOptions.dotsOptions.gradient);
     }
+    // Ensure integer dot size
+    newOptions.dotsOptions.size = Math.round(Math.max(0, newOptions.dotsOptions.size) || 10);
     if (newOptions.cornersSquareOptions) {
         newOptions.cornersSquareOptions = {
             ...newOptions.cornersSquareOptions
@@ -888,7 +890,7 @@ class QRSVG {
                 if (filter && !filter(i, j)) {
                     continue;
                 }
-                if (!this._qr?.isDark(i, j)) {
+                if (!this._qr?.isDark(j, i)) {
                     continue;
                 }
                 dot.draw(xBeginning + i * dotSize, yBeginning + j * dotSize, dotSize, (xOffset, yOffset) => {
@@ -896,7 +898,7 @@ class QRSVG {
                         return false;
                     if (filter && !filter(i + xOffset, j + yOffset))
                         return false;
-                    return !!this._qr && this._qr.isDark(i + xOffset, j + yOffset);
+                    return !!this._qr && this._qr.isDark(j + yOffset, i + xOffset);
                 });
                 if (dot._element && this._dotsClipPath) {
                     this._dotsClipPath.appendChild(dot._element);
@@ -1183,7 +1185,7 @@ let QRCodeStyling$1 = class QRCodeStyling {
         }
         const count = Math.ceil((this._options.shape == ShapeType.circle ? Math.sqrt(2) : 1) * this._qr.getModuleCount());
         const margin = (this._options.backgroundOptions && this._options.backgroundOptions.margin) || 0;
-        const size = this._options.dotsOptions.size * (count + 2 * margin);
+        const size = Math.ceil(this._options.dotsOptions.size * (count + 2 * margin));
         const qrSVG = new QRSVG({
             ...this._options,
             width: size,