canvas margin option + depedency update

sonthanhdan · Jan 11, 2021 · 06308af · 06308af
1 parent 0bea413
commit 06308af
Show file tree

Hide file tree

Showing 8 changed files with 225 additions and 236 deletions.
diff --git a/README.md b/README.md
@@ -76,6 +76,7 @@ width                  |number|`300`        |Size of canvas
 height                 |number|`300`        |Size of canvas
 data                   |string|             |The date will be encoded to the QR code
 image                  |string|             |The image will be copied to the center of the QR code
+margin                 |number|`0`          |Margin around canvas
 qrOptions              |object|             |Options will be passed to `qrcode-generator` lib
 imageOptions           |object|             |Specific image options, details see below
 dotsOptions            |object|             |Dots styling options

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,18 +19,18 @@
     "eslint-config-prettier": "^6.1.0",
     "eslint-loader": "^2.2.1",
     "eslint-plugin-jest": "^22.15.1",
-    "eslint-plugin-prettier": "^3.1.0",
-    "html-webpack-plugin": "^4.5.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "html-webpack-plugin": "^4.5.1",
     "jest": "^26.6.3",
     "jest-environment-jsdom-fifteen": "^1.0.0",
     "prettier": "^1.18.2",
     "ts-jest": "^26.4.4",
     "ts-loader": "^6.2.0",
     "typescript": "^3.6.4",
-    "webpack": "^5.11.0",
+    "webpack": "^5.12.3",
     "webpack-cli": "^3.3.6",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^5.7.2"
+    "webpack-dev-server": "^3.11.1",
+    "webpack-merge": "^5.7.3"
   },
   "scripts": {
     "build": "webpack --mode=production --config webpack.config.build.js",

diff --git a/src/assets/test/simple_qr_with_margin_canvas.png b/src/assets/test/simple_qr_with_margin_canvas.png
diff --git a/src/core/QRCanvas.test.js b/src/core/QRCanvas.test.js
@@ -91,4 +91,16 @@ describe("Test QRCanvas class", () => {
       done();
     });
   });
+  it("Should draw a qr code with margin around canvas", () => {
+    const expectedQRCodeFile = fs.readFileSync(
+      path.resolve(__dirname, "../assets/test/simple_qr_with_margin_canvas.png"),
+      "base64"
+    );
+    const canvas = new QRCanvas({
+      ...defaultOptions,
+      margin: 20
+    });
+    canvas.drawQR(qr);
+    expect(canvas.getCanvas().toDataURL()).toEqual(expect.stringContaining(expectedQRCodeFile));
+  });
 });
diff --git a/src/core/QRCanvas.ts b/src/core/QRCanvas.ts
@@ -69,7 +69,7 @@ export default class QRCanvas {
 
   async drawQR(qr: QRCode): Promise<void> {
     const count = qr.getModuleCount();
-    const minSize = Math.min(this._options.width, this._options.height);
+    const minSize = Math.min(this._options.width, this._options.height) - this._options.margin / 2;
     const dotSize = Math.floor(minSize / count);
     let drawImageSize = {
       hideXDots: 0,
@@ -173,7 +173,7 @@ export default class QRCanvas {
       throw "The canvas is too small.";
     }
 
-    const minSize = Math.min(options.width, options.height);
+    const minSize = Math.min(options.width, options.height) - options.margin;
     const dotSize = Math.floor(minSize / count);
     const xBeginning = Math.floor((options.width - count * dotSize) / 2);
     const yBeginning = Math.floor((options.height - count * dotSize) / 2);
@@ -239,7 +239,7 @@ export default class QRCanvas {
     const options = this._options;
 
     const count = this._qr.getModuleCount();
-    const minSize = Math.min(options.width, options.height);
+    const minSize = Math.min(options.width, options.height) - options.margin;
     const dotSize = Math.floor(minSize / count);
     const cornersSquareSize = dotSize * 7;
     const cornersDotSize = dotSize * 3;

diff --git a/src/core/QROptions.ts b/src/core/QROptions.ts
@@ -59,6 +59,7 @@ export type Options = {
 export interface RequiredOptions extends Options {
   width: number;
   height: number;
+  margin: number;
   data: string;
   qrOptions: {
     typeNumber: TypeNumber;
@@ -86,6 +87,7 @@ const defaultOptions: RequiredOptions = {
   width: 300,
   height: 300,
   data: "",
+  margin: 0,
   qrOptions: {
     typeNumber: qrTypes[0],
     mode: undefined,

diff --git a/src/tools/sanitizeOptions.ts b/src/tools/sanitizeOptions.ts
@@ -26,13 +26,18 @@ export default function sanitizeOptions(options: RequiredOptions): RequiredOptio
 
   newOptions.width = Number(newOptions.width);
   newOptions.height = Number(newOptions.height);
+  newOptions.margin = Number(newOptions.margin);
   newOptions.imageOptions = {
     ...newOptions.imageOptions,
     hideBackgroundDots: Boolean(newOptions.imageOptions.hideBackgroundDots),
     imageSize: Number(newOptions.imageOptions.imageSize),
     margin: Number(newOptions.imageOptions.margin)
   };
 
+  if (newOptions.margin > Math.min(newOptions.width, newOptions.height)) {
+    newOptions.margin = Math.min(newOptions.width, newOptions.height);
+  }
+
   newOptions.dotsOptions = {
     ...newOptions.dotsOptions
   };